webpack - 来自已编译 css 的 Webpack 4 Sourcemap SCSS
问题描述
刚刚使用 webpack 设置了我的一个项目,第一次使用它,所以只是想了解它。
基本上我已经将 SCSS 编译成 CSS,但是以前当我使用 grunt 时,有 sourcemap 设置,如果你正在检查元素,它会显示你从哪个 .scss 文件中提取元素,即使它被编译成一个 CSS 文件。
这是我的 webpack 配置:
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
module.exports = {
mode: 'development',
context: __dirname +"/src",
devtool: 'source-map',
entry: {
head: __dirname + "/src/themes/pixellabs/js/head/head.js",
styles: __dirname + "/src/themes/pixellabs/scss/styles.scss",
foot: __dirname + "/src/themes/pixellabs/js/foot/foot.js",
},
output: {
path: __dirname + "/src/themes/pixellabs/js/",
filename: "[name].min.js"
},
watchOptions: {
aggregateTimeout: 300 // The default
},
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].css',
outputPath: '../css/'
}
},
{
loader: 'extract-loader'
},
{
loader: 'imports-loader'
},
{
loader: 'css-loader',
options: { minimize: true }
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
},
{
test: /\.(png|jpg|svg)/,
use: [
{loader: "url-loader"}
]
}
],
},
plugins: debug ? [] : [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
}),
new webpack.optimize.UglifyJsPlugin({
mangle: false,
sourcemap: true
}),
],
};
解决方案
https://github.com/webpack-contrib/sass-loader#source-maps
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader", options: {
sourceMap: true
}
}, {
loader: "sass-loader", options: {
sourceMap: true
}
}]
}]
}
推荐阅读
- permissions - 在共享的 Windows 主机中显示公共文件夹文件
- kubernetes - 如何创建自己的 Kubernetes Strimzi Operator 的 Kafka 用户证书和密钥?
- reactjs - 反应本机问题,将数据保存到 Firestore
- security - asp.net 核心身份 cookie 重放攻击
- asp.net - 找不到“/null”的控制器路径或未实现 IController
- java - 从多图列表中删除元素的最佳方法
- amazon-web-services - 我可以将 EBS 快照保留多长时间?
- kotlin - FreeMarker 在 Ktor 中找不到基本目录
- django - Python3 和 django3 谷歌业务 API 错误
- python - N00b 问题:ValueError:尝试在非包中进行相对导入