node组件node-sass、sass-loader

# node-sass #### Supported Node.js versions vary by release, please consult the [releases page](https://github.com/sass/node-sass/releases). Below is a quick guide for minimium support: NodeJS | Minimum node-sass version | Node Module --------|--------------------------|------------ Node 12 | 4.12+ | 72 Node 11 | 4.10+ | 67 Node 10 | 4.9+ | 64 Node 8 | 4.5.3+ | 57 <table> <tr> <td> <img width="77px" alt="Sass logo" src="https://rawgit.com/sass/node-sass/master/media/logo.svg" /> </td> <td valign="bottom" align="right"> <a href="https://www.npmjs.com/package/node-sass"> <img width="100%" src="https://nodei.co/npm/node-sass.png?downloads=true&downloadRank=true&stars=true"> </a> </td> </tr> </table> [](https://travis-ci.org/sass/node-sass) [](https://ci.appveyor.com/project/sass/node-sass/branch/master) [](http://badge.fury.io/js/node-sass) [](https://david-dm.org/sass/node-sass) [](https://david-dm.org/sass/node-sass#info=devDependencies) [](https://coveralls.io/r/sass/node-sass?branch=master) [](http://inch-ci.org/github/sass/node-sass) [](https://libsass-slack.herokuapp.com/) Node-sass is a library that provides binding for Node.js to [LibSass], the C version of the popular stylesheet preprocessor, Sass. It allows you to natively compile .scss files to css at incredible speed and automatically via a connect middleware. Find it on npm: <https://www.npmjs.com/package/node-sass> Follow @nodesass on twitter for release updates: <https://twitter.com/nodesass> ## Install ```shell npm install node-sass ``` Some users have reported issues installing on Ubuntu due to `node` being registered to another package. [Follow the official NodeJS docs](https://github.com/nodejs/node-v0.x-archive/wiki/Installing-Node.js-via-package-manager) to install NodeJS so that `#!/usr/bin/env node` correctly resolves. Compiling on Windows machines requires the [node-gyp prerequisites](https://github.com/nodejs/node-gyp#on-windows). Are you seeing the following error? Check out our [Troubleshooting guide](https://github.com/sass/node-sass/blob/master/TROUBLESHOOTING.md#installing-node-sass-4x-with-node--4).** ``` SyntaxError: Use of const in strict mode. ``` **Having installation troubles? Check out our [Troubleshooting guide](https://github.com/sass/node-sass/blob/master/TROUBLESHOOTING.md).** ### Install from mirror in China ```shell npm install -g mirror-config-china --registry=http://registry.npm.taobao.org npm install node-sass ``` ## Usage ```javascript var sass = require('node-sass'); sass.render({ file: scss_filename, [, options..] }, function(err, result) { /*...*/ }); // OR var result = sass.renderSync({ data: scss_content [, options..] }); ``` ## Options ### file * Type: `String` * Default: `null` **Special**: `file` or `data` must be specified Path to a file for [LibSass] to compile. ### data * Type: `String` * Default: `null` **Special**: `file` or `data` must be specified A string to pass to [LibSass] to compile. It is recommended that you use `includePaths` in conjunction with this so that [LibSass] can find files when using the `@import` directive. ### importer (>= v2.0.0) - _experimental_ **This is an experimental LibSass feature. Use with caution.** * Type: `Function | Function[]` signature `function(url, prev, done)` * Default: `undefined` Function Parameters and Information: * `url (String)` - the path in import **as-is**, which [LibSass] encountered * `prev (String)` - the previously resolved path * `done (Function)` - a callback function to invoke on async completion, takes an object literal containing * `file (String)` - an alternate path for [LibSass] to use **OR** * `contents (String)` - the imported contents (for example, read from memory or the file system) Handles when [LibSass] encounters the `@import` directive. A custom importer allows extension of the [LibSass] engine in both a synchronous and asynchronous manner. In both cases, the goal is to either `return` or call `done()` with an object literal. Depending on the value of the object literal, one of two things will happen. When returning or calling `done()` with `{ file: "String" }`, the new file path will be assumed for the `@import`. It's recommended to be mindful of the value of `prev` in instances where relative path resolution may be required. When returning or calling `done()` with `{ contents: "String" }`, the string value will be used as if the file was read in through an external source. Starting from v3.0.0: * `this` refers to a contextual scope for the immediate run of `sass.render` or `sass.renderSync` * importers can return error and LibSass will emit that error in response. For instance: ```javascript done(new Error('doesn\'t exist!')); // or return synchronously return new Error('nothing to do here'); ``` * importer can be an array of functions, which will be called by LibSass in the order of their occurrence in array. This helps user specify special importer for particular kind of path (filesystem, http). If an importer does not want to handle a particular path, it should return `null`. See [functions section](#functions--v300---experimental) for more details on Sass types. ### functions (>= v3.0.0) - _experimental_ **This is an experimental LibSass feature. Use with caution.** `functions` is an `Object` that holds a collection of custom functions that may be invoked by the sass files being compiled. They may take zero or more input parameters and must return a value either synchronously (`return ...;`) or asynchronously (`done();`). Those parameters will be instances of one of the constructors contained in the `require('node-sass').types` hash. The return value must be of one of these types as well. See the list of available types below: #### types.Number(value [, unit = ""]) * `getValue()`/ `setValue(value)` : gets / sets the numerical portion of the number * `getUnit()` / `setUnit(unit)` : gets / sets the unit portion of the number #### types.String(value) * `getValue()` / `setValue(value)` : gets / sets the enclosed string #### types.Color(r, g, b [, a = 1.0]) or types.Color(argb) * `getR()` / `setR(value)` : red component (integer from `0` to `255`) * `getG()` / `setG(value)` : green component (integer from `0` to `255`) * `getB()` / `setB(value)` : blue component (integer from `0` to `255`) * `getA()` / `setA(value)` : alpha component (number from `0` to `1.0`) Example: ```javascript var Color = require('node-sass').types.Color, c1 = new Color(255, 0, 0), c2 = new Color(0xff0088cc); ``` #### types.Boolean(value) * `getValue()` : gets the enclosed boolean * `types.Boolean.TRUE` : Singleton instance of `types.Boolean` that holds "true" * `types.Boolean.FALSE` : Singleton instance of `types.Boolean` that holds "false" #### types.List(length [, commaSeparator = true]) * `getValue(index)` / `setValue(index, value)` : `value` must itself be an instance of one of the constructors in `sass.types`. * `getSeparator()` / `setSeparator(isComma)` : whether to use commas as a separator * `getLength()` #### types.Map(length) * `getKey(index)` / `setKey(index, value)` * `getValue(index)` / `setValue(index, value)` * `getLength()` #### types.Null() * `types.Null.NULL