Loads a SASS/SCSS file and compiles it to CSS.
Use the css-loader or the raw-loader to turn it into a JS module and the ExtractTextPlugin to extract it into a separate file. Looking for the webpack 1 loader? Check out the archive/webpack-1 branch.
npm install sass-loader node-sass webpack --save-dev
node-sass 和 webpack 是 sass-loader 的 peerDependency
,因此能够精确控制它们的版本。
通过将 style-loader 和 css-loader 与 sass-loader 链式调用,可以立刻将样式作用在 DOM 元素。
// webpack.config.js
module.exports = {
...
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader" // 将 JS 字符串生成为 style 节点
}, {
loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
}, {
loader: "sass-loader" // 将 Sass 编译成 CSS
}]
}]
}
};
也可以通过指定 options
参数,向 node-sass 传递选项参数。例如:
// webpack.config.js
module.exports = {
...
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader",
options: {
includePaths: ["absolute/path/a", "absolute/path/b"]
}
}]
}]
}
};
Sass 的更多选项参见 node-sass。
通常,生产环境下比较推荐的做法是,使用 ExtractTextPlugin 将样式表抽离成专门的单独文件。这样,样式表将不再依赖于 JavaScript:
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractSass = new ExtractTextPlugin({
filename: "[name].[contenthash].css",
disable: process.env.NODE_ENV === "development"
});
module.exports = {
...
module: {
rules: [{
test: /\.scss$/,
use: extractSass.extract({
use: [{
loader: "css-loader"
}, {
loader: "sass-loader"
}],
// 在开发环境使用 style-loader
fallback: "style-loader"
})
}]
},
plugins: [
extractSass
]
};
webpack 提供一种解析文件的高级的机制。sass-loader 使用 node-sass 的 custom importer 特性,将所有的 query 传递给 webpack 的解析引擎(resolving engine)。只要它们前面加上 ~
,告诉 webpack 它不是一个相对路径,这样就可以 import 导入 node_modules
目录里面的 sass 模块:
@import "~bootstrap/dist/css/bootstrap";
重要的是,只在前面加上 ~
,因为 ~/
会解析到主目录(home directory)。webpack 需要区分 bootstrap
和 ~bootstrap
,因为 CSS 和 Sass 文件没有用于导入相关文件的特殊语法。@import "file"
与 @import "./file";
这两种写法是相同的
url(...)
的问题由于 Sass/libsass 并没有提供url rewriting 的功能,所以所有的链接资源都是相对输出文件(output)而言。
main.scss
)。第二种情况可能会带来一些问题。正常情况下我们期望相对路径的引用是相对于 .scss
去解析(如同在 .css
文件一样)。幸运的是,有2个方法可以解决这个问题:
$icon-font-path
来设置。参见this working bootstrap example。使用 webpack 打包 CSS 有许多优点,在开发环境,可以通过 hashed urls 或 模块热替换(HMR) 引用图片和字体资源。而在线上环境,使样式依赖 JS 执行环境并不是一个好的实践。渲染会被推迟,甚至会出现 FOUC,因此在最终线上环境构建时,最好还是能够将 CSS 放在单独的文件中。
从 bundle 中提取样式表,有2种可用的方法:
要启用 CSS source map,需要将 sourceMap
选项作为参数,传递给 sass-loader 和 css-loader。此时webpack.config.js
如下:
module.exports = {
...
devtool: "source-map", // any "source-map"-like devtool is possible
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader", options: {
sourceMap: true
}
}, {
loader: "sass-loader", options: {
sourceMap: true
}
}]
}]
}
};
如果你要在 Chrome 中编辑原始的 Sass 文件,建议阅读这篇不错的博客文章。具体示例参考 test/sourceMap。
如果你要将 Sass 代码放在实际的入口文件(entry file)之前,可以设置 data
选项。此时 sass-loader 不会覆盖 data
选项,只会将它拼接在入口文件的内容之前。当 Sass 变量依赖于环境时,这一点尤其有用。
{
loader: "sass-loader",
options: {
data: "$env: " + process.env.NODE_ENV + ";"
}
}
注意:由于代码注入, 会破坏整个入口文件的 source map。通常一个简单的解决方案是,多个 Sass 文件入口。
Johannes Ewald |
Jorik Tangelder |
Kiran |