[英]Sourcemap to original SCSS file
I'm using Webpack 4
with the plugins MiniCssExtractPlugin
and OptimizeCSSAssetsPlugin
to extract SCSS
files and minify the main.css
file in production. 我using Webpack 4
与MiniCssExtractPlugin
和OptimizeCSSAssetsPlugin
插件MiniCssExtractPlugin
using Webpack 4
以提取SCSS
文件并最小化生产环境中的main.css
文件。 I have source mapping enabled in my config file like so: 我在配置文件中启用了源映射,如下所示:
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
devtool: "source-map",
entry: {
style: './src/scss/main.scss'
},
output: {
path: path.resolve(__dirname, "dist"),
filename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{ loader: 'css-loader', options: { url: false, sourceMap: true } }
]
},
{
test: /\.scss$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
url: false, sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
sourceMap: true,
filename: "main.css"
}),
new UglifyJsPlugin({
sourceMap: true,
test: /\.js($|\?)/i,
}),
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: {
map: {
inline: true
}
}
}) ,
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
}
In the console, it does give the line where a CSS rules originates from, but in the bundled main.css
file, rather than invididual scss files ie _layout.scss
, _buttons.scss
. 在控制台中,它确实给出了CSS规则的起源行,但位于捆绑的main.css
文件中,而不是单独的scss文件(即_layout.scss
和_buttons.scss
。
Question 题
What configuration do I add in order to display where the CSS rule originates from, rather then where it is located in the bundled main.css
file? 我要添加什么配置以便显示CSS规则的来源,而不是显示在捆绑的main.css
文件中的位置?
As i can see on your sass-loader
configuration, you're already getting the source maps for yous scss
files (to verify that you need to have a file with the same name as you css, but with a .map
on its name), so the only thing you will need is to peroperly configure your browser to load and use the source maps. 正如我在sass-loader
配置上看到的那样,您已经在获取您的scss
文件的源映射(以验证您需要具有与css同名的文件,但其名称上带有.map
) ,因此您唯一需要做的就是对浏览器进行有效配置,以加载和使用源地图。 This example uses Google Chrome: 本示例使用Google Chrome:
/*# sourceMappingURL=style.css.map */
reference 在某些较新版本的Chrome中,应使用/*# sourceMappingURL=style.css.map */
参考自动加载文件 That should work. 那应该工作。 Let me know. 让我知道。 Otherwise i will fine tune the quick tutorial. 否则,我会微调快速教程。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.