webpack加载 Sass 文件和创建source map
2019-06-25 本文已影响0人
最底层的技术渣
加载 Sass 需要sass-loader
。(一定要安装了Sass
才可以,如未安装,请先安装Sass
)
安装
npm i -D sass-loader
npm i -D node-sass
F:\git\webpack4>npm i -D sass-loader node-loader
npm WARN webpack4@1.0.0 No description
npm WARN webpack4@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darw
in","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ node-loader@0.6.0
+ sass-loader@7.1.0
added 10 packages in 11.661s
使用:
// webpack.config.js
module.exports = {
...
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader"
}]
}]
}
};
或者(和css
的对比)
const path = require('path');
module.exports = {
entry:'./src/js/index.js',
mode:'development',
output:{
filename:'main.js',
path:path.resolve(__dirname,"demo")
},
module:{
rules:[
{
//test:/\.css$/,
//use:['style-loader','css-loader'],
test:/\.(sc|c|sa)ss$/,
use:['style-loader','css-loader','sass-loader']
}
],
//noParse:/jquery|lodash/
}
};
为 sass 文件注入内容:
如果你要将 Sass 代码放在实际的入口文件(entry file)之前,可以设置 data 选项。此时 sass-loader 不会覆盖 data 选项,只会将它拼接在入口文件的内容之前。
{
loader: "sass-loader",
options: {
data: "$env: " + process.env.NODE_ENV + ";"
}
}
注意:由于代码注入, 会破坏整个入口文件的
source map
。 通常一个简单的解决方案是,多个 Sass 文件入口。
创建 Source Map
Source Map可以这样来理解:追踪来源,使用之后可以很清楚的定位
未使用source map的效果
使用source map的效果
css-loader
和sass-loader
都可以通过该 options 设置启用 sourcemap。
// webpack.config.js
module.exports = {
...
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
sourceMap: true
}
}, {
loader: "sass-loader",
options: {
sourceMap: true
}
}]
}]
}
};