Javascript sass to css

How to compile SCSS to CSS and load the CSS code as string into a variable?

I don’t want to load a pre-made CSS file, I want to be able to author the CSS code via SASS. I also don’t want to compile the CSS from SCSS at runtime, e.g. on every app load.

In other words I have the following workflow in mind:

• Author the CSS in a pre-defined SCSS file that is part of my project structure
• At build time (or at run-dev time) I want that this SCSS is compiled into a CSS file
• Then at runtime, in one of my Vue components, I want to load the previously produced CSS code as string into a variable

The reasoning for that is that this CSS code will then be fed into and iframe (via postMessage-ing) and the iframe will use CSSStyleSheet’s insertRule() to apply the styles to the page.

How should I configure my project and packages so that this can happen? One thing that I found already is that I might need to use the raw-loader but how do I prepare the CSS file when building the project so that the raw-loader can get it at runtime?

3 Answers 3

From an initial look you have two problems here both of which are relatively simple.

The first one is you need to include a scss compiler plugin during your projects build step. Which one you use will depend on any existing tooling you may be using. Otherwise, you can just drop in https://www.npmjs.com/package/node-sass

The second issue is how to acquire the css at runtime. You have a couple options here. You can compile the file into your bundle or you could retrieve it at runtime. Runtime would keep your bundle small and allow you to serve the css normally but this requires a server to serve it. Compile time would be faster to load initially but increase your bundle size.

If you are using webpack you could use the raw loader you linked but if you are not currently using webpack that is probably out of scope.

You could do this by adding a new step to your build that converts the css into a String literal which would alleviate the need to load it at runtime but increase your bundle side.

For loading at runtime, you could easily retrieve the file via ajax from an http server.

Источник

sass

The sass package on npm is a pure-JavaScript package built from the Dart Sass implementation. In addition to Dart Sass’s command-line interface, it provides a JavaScript API that can be used to drive Sass compilations from JavaScript. It even allows an application to control how stylesheets are loaded and define custom functions.

Usage

The JavaScript API provides two entrypoints for compiling Sass to CSS , each of which has a synchronous variant that returns a plain CompileResult and an asynchronous variant that returns a Promise . The asynchronous variants are much slower, but they allow custom importers and functions to run asynchronously.

compile and compileAsync take a path to a Sass file and return the result of compiling that file to CSS . These functions accept an additional Options argument.

const sass = require('sass');

const result = sass.compile("style.scss");
console.log(result.css);

const compressed = sass.compile("style.scss", style: "compressed">);
console.log(compressed.css); Copy

const sass = require('sass');

const input = `
h1 
 font-size: 40px;
 code 
 font-face: Roboto Mono;
 >
>`;

const result = sass.compileString(input);
console.log(result.css);

const compressed = sass.compileString(input, style: "compressed">);
console.log(compressed.css); Copy

Integrations

Most popular Node.js build systems have integrations available for the JS API :

• Webpack uses the sass-loader package.
• Gulp uses the gulp-sass package.
• Broccoli uses the broccoli-sass-source-maps package.
• Ember uses the ember-cli-sass package.
• Grunt uses the grunt-sass package.

Legacy API

The sass package also supports an older API . Although this API is deprecated, it will continue to be supported until the release of version 2.0.0 of the sass package. The legacy API is also supported by the node-sass package, which is a native extension wrapper for the deprecated LibSass implementation.

The legacy API has two entrypoints for compiling Sass to CSS . Each one can compile either a Sass file by passing in LegacyFileOptions or a string of Sass code by passing in a LegacyStringOptions.

renderSync runs synchronously. It’s by far the fastest option when using Dart Sass, but at the cost of only supporting synchronous importer and function plugins.

const sass = require('sass'); // or require('node-sass');

const result = sass.renderSync(file: "style.scss">);
console.log(result.css.toString()); Copy

const sass = require('sass'); // or require('node-sass');

sass.render( 
file: "style.scss"
>, function(err, result)  
if (err)  
// . 
 > else  
console.log(result.css.toString());
 >
>); Copy

Источник

sass

The sass package on npm is a pure-JavaScript package built from the Dart Sass implementation. In addition to Dart Sass’s command-line interface, it provides a JavaScript API that can be used to drive Sass compilations from JavaScript. It even allows an application to control how stylesheets are loaded and define custom functions.

Usage

The JavaScript API provides two entrypoints for compiling Sass to CSS , each of which has a synchronous variant that returns a plain CompileResult and an asynchronous variant that returns a Promise . The asynchronous variants are much slower, but they allow custom importers and functions to run asynchronously.

compile and compileAsync take a path to a Sass file and return the result of compiling that file to CSS.

const sass = require('sass');

const result = sass.compile("style.scss");
console.log(result.css); 

const sass = require('sass');

const result = sass.compileString(`
h1 
 font-size: 40px;
 code 
 font-face: Roboto Mono;
 >
>`);
console.log(result.css); 

Integrations

Most popular Node.js build systems have integrations available for the JS API :

• Webpack uses the sass-loader package.
• Gulp uses the gulp-sass package.
• Broccoli uses the broccoli-sass-source-maps package.
• Ember uses the ember-cli-sass package.
• Grunt uses the grunt-sass package.

Legacy API

The sass package also supports an older API. Although this API is deprecated, it will continue to be supported until the release of version 2.0.0 of the sass package. The legacy API is also supported by the node-sass package, which is a native extension wrapper for the deprecated LibSass implementation.

The legacy API has two entrypoints for compiling Sass to CSS. Each one can compile either a Sass file by passing in LegacyFileOptions or a string of Sass code by passing in a LegacyStringOptions.

renderSync runs synchronously. It’s by far the fastest option when using Dart Sass, but at the cost of only supporting synchronous importer and function plugins.

const sass = require('sass'); // or require('node-sass');

const result = sass.renderSync(file: "style.scss">);
console.log(result.css.toString()); 

const sass = require('sass'); // or require('node-sass');

sass.render( 
file: "style.scss"
>, function(err, result)  
if (err)  
// . 
 > else  
console.log(result.css.toString());
 >
>); 

Источник

sass

The sass package on npm is a pure-JavaScript package built from the Dart Sass implementation. In addition to Dart Sass’s command-line interface, it provides a JavaScript API that can be used to drive Sass compilations from JavaScript. It even allows an application to control how stylesheets are loaded and define custom functions.

Usage

The JavaScript API provides two entrypoints for compiling Sass to CSS , each of which has a synchronous variant that returns a plain CompileResult and an asynchronous variant that returns a Promise . The asynchronous variants are much slower, but they allow custom importers and functions to run asynchronously.

compile and compileAsync take a path to a Sass file and return the result of compiling that file to CSS.

const sass = require('sass');

const result = sass.compile("style.scss");
console.log(result.css); 

const sass = require('sass');

const result = sass.compileString(`
h1 
 font-size: 40px;
 code 
 font-face: Roboto Mono;
 >
>`);
console.log(result.css); 

Integrations

Most popular Node.js build systems have integrations available for the JS API :

• Webpack uses the sass-loader package.
• Gulp uses the gulp-sass package.
• Broccoli uses the broccoli-sass-source-maps package.
• Ember uses the ember-cli-sass package.
• Grunt uses the grunt-sass package.

Legacy API

The sass package also supports an older API. Although this API is deprecated, it will continue to be supported until the release of version 2.0.0 of the sass package. The legacy API is also supported by the node-sass package, which is a native extension wrapper for the deprecated LibSass implementation.

The legacy API has two entrypoints for compiling Sass to CSS. Each one can compile either a Sass file by passing in LegacyFileOptions or a string of Sass code by passing in a LegacyStringOptions.

renderSync runs synchronously. It’s by far the fastest option when using Dart Sass, but at the cost of only supporting synchronous importer and function plugins.

const sass = require('sass'); // or require('node-sass');

const result = sass.renderSync(file: "style.scss">);
console.log(result.css.toString()); 

const sass = require('sass'); // or require('node-sass');

sass.render( 
file: "style.scss"
>, function(err, result)  
if (err)  
// . 
 > else  
console.log(result.css.toString());
 >
>); 

Источник

How to compile or convert sass / scss to css with node-sass (no Ruby)?

I have little experience with package managers and even less so with task runners.

4 Answers 4

I picked node-sass implementer for libsass because it is based on node.js.

Installing node-sass

• (Prerequisite) If you don’t have npm, install Node.js first.
• $ npm install -g node-sass installs node-sass globally -g .

This will hopefully install all you need, if not read libsass at the bottom.

How to use node-sass from Command line and npm scripts

$ node-sass [options] [output.css] $ cat | node-sass > output.css 

1. $ node-sass my-styles.scss my-styles.css compiles a single file manually.
2. $ node-sass my-sass-folder/ -o my-css-folder/ compiles all the files in a folder manually.
3. $ node-sass -w sass/ -o css/ compiles all the files in a folder automatically whenever the source file(s) are modified. -w adds a watch for changes to the file(s).

More usefull options like ‘compression’ @ here. Command line is good for a quick solution, however, you can use task runners like Grunt.js or Gulp.js to automate the build process.

You can also add the above examples to npm scripts. To properly use npm scripts as an alternative to gulp read this comprehensive article @ css-tricks.com especially read about grouping tasks.

• If there is no package.json file in your project directory running $ npm init will create one. Use it with -y to skip the questions.
• Add «sass»: «node-sass -w sass/ -o css/» to scripts in package.json file. It should look something like this:

How to use with gulp

• $ npm install -g gulp installs Gulp globally.
• If there is no package.json file in your project directory running $ npm init will create one. Use it with -y to skip the questions.
• $ npm install —save-dev gulp installs Gulp locally. —save-dev adds gulp to devDependencies in package.json .
• $ npm install gulp-sass —save-dev installs gulp-sass locally.
• Setup gulp for your project by creating a gulpfile.js file in your project root folder with this content:

'use strict'; var gulp = require('gulp'); 

A basic example to transpile

Add this code to your gulpfile.js:

var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function () < gulp.src('./sass/**/*.scss') .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('./css')); >); 

$ gulp sass runs the above task which compiles .scss file(s) in the sass folder and generates .css file(s) in the css folder.

To make life easier, let’s add a watch so we don’t have to compile it manually. Add this code to your gulpfile.js :

gulp.task('sass:watch', function () < gulp.watch('./sass/**/*.scss', ['sass']); >); 

All is set now! Just run the watch task:

How to use with Node.js

As the name of node-sass implies, you can write your own node.js scripts for transpiling. If you are curious, check out node-sass project page.

What about libsass?

Libsass is a library that needs to be built by an implementer such as sassC or in our case node-sass. Node-sass contains a built version of libsass which it uses by default. If the build file doesn’t work on your machine, it tries to build libsass for your machine. This process requires Python 2.7.x (3.x doesn’t work as of today). In addition:

LibSass requires GCC 4.6+ or Clang/LLVM. If your OS is older, this version may not compile. On Windows, you need MinGW with GCC 4.6+ or VS 2013 Update 4+. It is also possible to build LibSass with Clang/LLVM on Windows.

Источник