sass-loader
加载 SASS / SCSS 文件并将其编译为 CSS。
使用 css-loader 或 raw-loader 将其转换为JS模块，然后使用 ExtractTextPlugin 将其提取到单独的文件中。寻找 webpack 1加载程序？查看存档/ webpack-1分支。
安装
npm install sass-loader node-sass webpack --save-devsass-loader 需要 node-sass 和 webpack as peerDependency。因此，您可以准确控制版本。
例子
通过将 style-loader 和 css-loader 与 sass-loader 链式调用，可以立刻将样式作用在 DOM 元素。
// webpack.config.js
module.exports = {
...
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to 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"
}],
// use style-loader in development
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)而言。
- 如果您只是生成 CSS 而不传递给 CSS 加载器，则它必须与您的 Web 根目录相关。
- 如果您将生成的 CSS 传递给 css-loader，则所有 url 必须与入口文件（例如
main.scss）相关。
第二种情况可能会带来一些问题。正常情况下我们期望相对路径的引用是相对于 .scss 去解析（如同在 .css 文件一样）。幸运的是，有2个方法可以解决这个问题：
- 将 resolve-url-loader �设置于 loader 链中的 sass-loader 之后，就可以重写 url。
- Library 作者一般都会提供变量，用来设置资源路径，如 bootstrap-sass� 可以通过
$icon-font-path来设置。参见this working bootstrap example。
提取样式表
使用 webpack 打包 CSS 有许多优点，在开发环境，可以通过 hashed urls 或 模块热替换(HMR) 引用图片和字体资源。而在线上环境，使样式依赖 JS 执行环境并不是一个好的实践。渲染会被推迟，甚至会出现 FOUC，因此在最终线上环境构建时，最好还是能够将 CSS 放在单独的文件中。
从 bundle 中提取样式表，有2种可用的方法：
- extract-loader（更简单，但专门用于 css-loader 的输出）
- extract-text-webpack-plugin（更复杂，但适用于所有使用情况）
source map
要启用 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 文件，那么有一篇很好的博客文章。Checkout test / sourceMap 查看正在运行的示例。
环境变量
如果你要将 Sass 代码放在实际的入口文件(entry file)之前，可以设置 data 选项。此时 sass-loader 不会覆盖 data 选项，只会将它拼接在入口文件的内容之前。当 Sass 变量依赖于环境时，这一点尤其有用。
{
loader: "sass-loader",
options: {
data: "$env: " + process.env.NODE_ENV + ";"
}
}请注意：由于您正在注入代码，因此这会破坏条目文件中的源映射。通常有比这更简单的解决方案，比如多个 Sass 入口文件。
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
