在我的项目中,我包含一个CSS文件和一个SCSS文件:
require('./../vendor/glyphicons/glyphicons.css');
require('./../css/main.scss');
CSS的源地图 - 工作正常:
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
loader: ['css-loader?sourceMap']
})
}
SCSS - 已损坏的源地图(所有规则指向同一行,指向父元素 - body
)
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
loader: ['css-loader?sourceMap', 'postcss-loader', 'sass-loader?sourceMap']
})
}
编辑:我发现我并不是唯一拥有problem的人。
答案 0 :(得分:1)
{
test: /\.s?css$/,
exclude: /node_modules/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
sourceMap: true,
},
},
{
loader: 'css-loader',
options: {
sourceMap: true,
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
outputStyle: 'compressed', // This fixed the source maps
},
},
],
},
编辑:我在生产中使用devtool: 'source-map'
,在开发中使用devtool: 'cheap-eval-source-map'
。
我尚不完全了解其作用力,但是如果您希望让您的scss源映射指向具有正确行号的@import
文件,则可以使用。
行号不正确的原因,就我而言,我发现sass符合以下条件
body {
background: black;
}
到
body {
background: black; }