问题
In my project I'm including one CSS file and one SCSS file:
require('./../vendor/glyphicons/glyphicons.css');
require('./../css/main.scss');
Source map for CSS - works fine:
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
loader: ['css-loader?sourceMap']
})
}
Source map for SCSS - broken (all rules point to same line, to parent element - body
)
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
loader: ['css-loader?sourceMap', 'postcss-loader', 'sass-loader?sourceMap']
})
}
EDIT: I see I'm not the only one having this problem.
回答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
},
},
],
},
EDIT: I'm usinge devtool: 'source-map'
in production and devtool: 'cheap-eval-source-map'
in development.
I don't fully understand the forces at play quite yet, but if you are looking to have your scss source maps point to the @import
files with proper line numbers, this works.
The reason the line numbers are incorrect, in my case, I noticed sass complies something like
body {
background: black;
}
to
body {
background: black; }
来源:https://stackoverflow.com/questions/40784122/sass-loader-generates-broken-source-maps