sass-loader
Advanced tools
sass-loader - npm Package Compare versions
Comparing version 3.0.0 to 3.1.0
| Changelog | ||
| --------- | ||
| ### 3.1.0 | ||
| - Add possibility to also define all options in your `webpack.config.js` [#152](https://github.com/jtangelder/sass-loader/pull/152) [#170](https://github.com/jtangelder/sass-loader/pull/170) | ||
| - Fix a problem where modules with a `.` in their names were not resolved [#167](https://github.com/jtangelder/sass-loader/issues/167) | ||
| ### 3.0.0 | ||
@@ -5,0 +10,0 @@ |
71
index.js
@@ -9,2 +9,3 @@ 'use strict'; | ||
| var async = require('async'); | ||
| var assign = require('object-assign'); | ||
@@ -41,4 +42,4 @@ // A typical sass error looks like this | ||
| var resourcePath = this.resourcePath; | ||
| var sassOptions = getLoaderConfig(this); | ||
| var result; | ||
| var opt; | ||
@@ -94,3 +95,3 @@ /** | ||
| fileContext = path.normalize(fileContext); | ||
| request = utils.urlToRequest(url, opt.root); | ||
| request = utils.urlToRequest(url, sassOptions.root); | ||
| dirContext = fileToDirContext(fileContext); | ||
@@ -107,3 +108,3 @@ | ||
| fileContext = path.normalize(fileContext); | ||
| request = utils.urlToRequest(url, opt.root); | ||
| request = utils.urlToRequest(url, sassOptions.root); | ||
| dirContext = fileToDirContext(fileContext); | ||
@@ -211,7 +212,6 @@ | ||
| opt = utils.parseQuery(this.query); | ||
| opt.data = content; | ||
| sassOptions.data = content; | ||
| // Skip empty files, otherwise it will stop webpack, see issue #21 | ||
| if (opt.data.trim() === '') { | ||
| if (content.trim() === '') { | ||
| return isSync ? content : callback(null, content); | ||
@@ -221,4 +221,4 @@ } | ||
| // opt.outputStyle | ||
| if (!opt.outputStyle && this.minimize) { | ||
| opt.outputStyle = 'compressed'; | ||
| if (!sassOptions.outputStyle && this.minimize) { | ||
| sassOptions.outputStyle = 'compressed'; | ||
| } | ||
@@ -229,13 +229,13 @@ | ||
| // @see https://github.com/webpack/css-loader/pull/40 | ||
| if (opt.sourceMap) { | ||
| if (sassOptions.sourceMap) { | ||
| // deliberately overriding the sourceMap option | ||
| // this value is (currently) ignored by libsass when using the data input instead of file input | ||
| // however, it is still necessary for correct relative paths in result.map.sources | ||
| opt.sourceMap = this.options.output.path + '/sass.map'; | ||
| opt.omitSourceMapUrl = true; | ||
| sassOptions.sourceMap = this.options.output.path + '/sass.map'; | ||
| sassOptions.omitSourceMapUrl = true; | ||
| // If sourceMapContents option is not set, set it to true otherwise maps will be empty/null | ||
| // when exported by webpack-extract-text-plugin. | ||
| if ('sourceMapContents' in opt === false) { | ||
| opt.sourceMapContents = true; | ||
| if ('sourceMapContents' in sassOptions === false) { | ||
| sassOptions.sourceMapContents = true; | ||
| } | ||
@@ -245,10 +245,16 @@ } | ||
| // indentedSyntax is a boolean flag | ||
| opt.indentedSyntax = Boolean(opt.indentedSyntax); | ||
| sassOptions.indentedSyntax = Boolean(sassOptions.indentedSyntax); | ||
| opt.importer = getWebpackImporter(); | ||
| // Allow passing custom importers to `node-sass`. Accepts `Function` or an array of `Function`s. | ||
| sassOptions.importer = sassOptions.importer ? [].concat(sassOptions.importer) : []; | ||
| sassOptions.importer.push(getWebpackImporter()); | ||
| // `node-sass` uses `includePaths` to resolve `@import` paths. Append the currently processed file. | ||
| sassOptions.includePaths = sassOptions.includePaths ? [].concat(sassOptions.includePaths) : []; | ||
| sassOptions.includePaths.push(path.dirname(resourcePath)); | ||
| // start the actual rendering | ||
| if (isSync) { | ||
| try { | ||
| result = sass.renderSync(opt); | ||
| result = sass.renderSync(sassOptions); | ||
| addIncludedFilesToWebpack(result.stats.includedFiles); | ||
@@ -263,3 +269,3 @@ return result.css.toString(); | ||
| asyncSassJobQueue.push(opt, function onRender(err, result) { | ||
| asyncSassJobQueue.push(sassOptions, function onRender(err, result) { | ||
| if (err) { | ||
@@ -348,8 +354,10 @@ formatSassError(err); | ||
| } | ||
| if (ext) { | ||
| if (ext === '.scss' || ext === '.sass') { | ||
| add(basename); | ||
| }/* else { | ||
| Leave unknown extensions (like .css) untouched | ||
| }*/ | ||
| // We can't just check for ext being defined because ext can also be something like '.datepicker' | ||
| // when the true extension is omitted and the filename contains a dot. | ||
| // @see https://github.com/jtangelder/sass-loader/issues/167 | ||
| if (ext === '.css') { | ||
| // do not import css files | ||
| } else if (ext === '.scss' || ext === '.sass') { | ||
| add(basename); | ||
| } else { | ||
@@ -369,1 +377,18 @@ if (!startsWithUnderscore) { | ||
| } | ||
| /** | ||
| * Check the loader query and webpack config for loader options. If an option is defined in both places, | ||
| * the loader query takes precedence. | ||
| * | ||
| * @param {Loader} loaderContext | ||
| * @returns {Object} | ||
| */ | ||
| function getLoaderConfig(loaderContext) { | ||
| var query = utils.parseQuery(loaderContext.query); | ||
| var configKey = query.config || 'sassLoader'; | ||
| var config = loaderContext.options[configKey] || {}; | ||
| delete query.config; | ||
| return assign(query, config); | ||
| } |
| { | ||
| "name": "sass-loader", | ||
| "version": "3.0.0", | ||
| "version": "3.1.0", | ||
| "description": "Sass loader for webpack", | ||
@@ -45,2 +45,3 @@ "main": "index.js", | ||
| "node-sass": "3.3.3", | ||
| "object-assign": "^4.0.1", | ||
| "raw-loader": "^0.5.1", | ||
@@ -47,0 +48,0 @@ "should": "^7.0.2", |
@@ -18,5 +18,5 @@ # Sass loader for [webpack](http://webpack.github.io/) | ||
| var css = require("!raw!sass!./file.scss"); | ||
| // => returns compiled css code from file.scss, resolves imports | ||
| // => returns compiled css code from file.scss, resolves Sass imports | ||
| var css = require("!css!sass!./file.scss"); | ||
| // => returns compiled css code from file.scss, resolves imports and url(...)s | ||
| // => returns compiled css code from file.scss, resolves Sass and CSS imports and url(...)s | ||
| ``` | ||
@@ -37,2 +37,3 @@ | ||
| module.exports = { | ||
| ... | ||
| module: { | ||
@@ -53,6 +54,7 @@ loaders: [ | ||
| You can pass any Sass specific configuration options through to the render function via [query parameters](http://webpack.github.io/docs/using-loaders.html#query-parameters). | ||
| You can pass options to node-sass by defining a `sassLoader`-property on your `webpack.config.js`. See [node-sass](https://github.com/andrew/node-sass) for all available options. | ||
| ``` javascript | ||
| module.exports = { | ||
| ... | ||
| module: { | ||
@@ -62,43 +64,43 @@ loaders: [ | ||
| test: /\.scss$/, | ||
| loaders: ["style, "css", "sass?outputStyle=expanded&" + | ||
| "includePaths[]=" + | ||
| encodeURIComponent(path.resolve(__dirname, "./some-folder")) + "&" + | ||
| "includePaths[]=" + | ||
| encodeURIComponent(path.resolve(__dirname, "./another-folder"))] | ||
| loaders: ["style", "css", "sass"] | ||
| } | ||
| ] | ||
| } | ||
| sassLoader: { | ||
| includePaths: [path.resolve(__dirname, "./some-folder")] | ||
| } | ||
| }; | ||
| ``` | ||
| See [node-sass](https://github.com/andrew/node-sass) for all available options. | ||
| Passing your options as [query parameters](http://webpack.github.io/docs/using-loaders.html#query-parameters) is also supported, but can get confusing if you need to set a lot of options. | ||
| ### Imports | ||
| If you need to define two different loader configs, you can also change the config's property name via `sass?config=otherSassLoaderConfig`: | ||
| webpack provides an [advanced mechanism to resolve files](http://webpack.github.io/docs/resolving.html). The sass-loader uses node-sass' custom importer feature to pass all queries to the webpack resolving engine. Thus you can import your sass-modules from `node_modules`. Just prepend them with a `~` which tells webpack to look-up the [`modulesDirectories`](http://webpack.github.io/docs/configuration.html#resolve-modulesdirectories). | ||
| ```css | ||
| @import "~bootstrap/less/bootstrap"; | ||
| ``` | ||
| It's important to only prepend it with `~`, because `~/` resolves to the home-directory. webpack needs to distinguish between `bootstrap` and `~bootstrap` because CSS- and Sass-files have no special syntax for importing relative files. Writing `@import "file"` is the same as `@import "./file";` | ||
| ### .sass files | ||
| For requiring `.sass` files, add `indentedSyntax` as a loader option: | ||
| ``` javascript | ||
| ```javascript | ||
| module.exports = { | ||
| ... | ||
| module: { | ||
| loaders: [ | ||
| { | ||
| test: /\.sass$/, | ||
| // Passing indentedSyntax query param to node-sass | ||
| loaders: ["style", "css", "sass?indentedSyntax"] | ||
| test: /\.scss$/, | ||
| loaders: ["style", "css", "sass?config=otherSassLoaderConfig"] | ||
| } | ||
| ] | ||
| } | ||
| otherSassLoaderConfig: { | ||
| ... | ||
| } | ||
| }; | ||
| ``` | ||
| ### Imports | ||
| webpack provides an [advanced mechanism to resolve files](http://webpack.github.io/docs/resolving.html). The sass-loader uses node-sass' custom importer feature to pass all queries to the webpack resolving engine. Thus you can import your sass-modules from `node_modules`. Just prepend them with a `~` which tells webpack to look-up the [`modulesDirectories`](http://webpack.github.io/docs/configuration.html#resolve-modulesdirectories). | ||
| ```css | ||
| @import "~bootstrap/less/bootstrap"; | ||
| ``` | ||
| It's important to only prepend it with `~`, because `~/` resolves to the home-directory. webpack needs to distinguish between `bootstrap` and `~bootstrap` because CSS- and Sass-files have no special syntax for importing relative files. Writing `@import "file"` is the same as `@import "./file";` | ||
| ### Problems with `url(...)` | ||
@@ -116,5 +118,5 @@ | ||
| ## Source maps | ||
| ### Source maps | ||
| To enable CSS Source maps, you'll need to pass the `sourceMap`-option to the sass- and the css-loader. Your `webpack.config.js` should look like this: | ||
| To enable CSS Source maps, you'll need to pass the `sourceMap`-option to the sass- *and* the css-loader. Your `webpack.config.js` should look like this: | ||
@@ -121,0 +123,0 @@ ```javascript |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by6.24%
28789
- Lines of code
- increased by6.41%
332
- Number of lines in readme file
- increased by1.47%
138
Worsened metrics
- Dev dependency count
- increased by8.33%
13
No dependency changes