sass-loader-sync
v0.3.2
Published
SASS loader for Webpack (with support for enhanced require)
Downloads
5
Readme
sass loader for webpack
Usage
var css = require("!raw!sass!./file.scss");
// => returns compiled css code from file.scss, resolves imports
var css = require("!css!sass!./file.scss");
// => returns compiled css code from file.scss, resolves imports and url(...)s
Use in tandem with the style-loader
to add the css rules to your document:
require("!style!css!sass!./file.scss");
webpack config
It's recommended to adjust your webpack.config
so style!css!sass!
is applied automatically on all files ending on .scss
:
module.exports = {
module: {
loaders: [
{
test: /\.scss$/,
// Query parameters are passed to node-sass
loader: "style!css!sass?outputStyle=expanded&" +
"includePaths[]=" +
(path.resolve(__dirname, "./bower_components")) + "&" +
"includePaths[]=" +
(path.resolve(__dirname, "./node_modules"))
}
]
}
};
Then you only need to write: require("./file.scss")
. See node-sass
for the available options.
Install
npm install sass-loader
Caveats
Currently the sass-loader does not follow all of the webpack loader guidelines. The general problem is that the entry scss-file is passed to node-sass which does pretty much the rest. Thus @import
statements inside your scss-files cannot be resolved by webpack's resolver. However, there is an issue for that missing feature in libsass.
License
MIT (http://www.opensource.org/licenses/mit-license.php)