extract-text-webpack-plugin - 提取 scss 导致 main.css.map 中没有映射

Posted 2023-03-06

【中文标题】extract-text-webpack-plugin - 提取 scss 导致 main.css.map 中没有映射

【英文标题】：extract-text-webpack-plugin - extracting scss results in no mapping in main.css.map

【发布时间】：2017-04-02 12:28:05

【问题描述】：

我已经设法将 2 个 scss 文件提取到 1 个 css 文件中，但我注意到 main.css.map 中的源和映射是空的：

"version":3,"sources":[],"names":[],"mappings":"","file":"./main.css","sourceRoot":""

我的webpack.config.js：

var autoprefixer = require('autoprefixer');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = 
    devtool: 'source-map',
    module:  
        loaders: [
                test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000',
                 
                    test:   /\.scss$/,
                    loader: ExtractTextPlugin.extract(['css', 'sass'])
                
            
        ]
    ,

    entry:   [
        './static/js/app.js'
    ],

    output:  
        filename: './static/js/bundle.js'
    ,

    watch:   false,

    plugins: [
        new ExtractTextPlugin("./main.css")
    ]
;

我的app.js：

var $ = require('jquery');
window.jQuery = $;
window.$ = $;
require('bootstrap-loader');

module.exports = (function () 
    alert('IT WORKS!');
);

window.app = module.exports;

require('./../css/main.scss');
require('./../css/main2.scss');

webpack 终端的输出：

Hash: 28bc2c1ea9d333be2975
Version: webpack 1.13.3
Time: 3500ms
                               Asset      Size  Chunks             Chunk Names
89889688147bd7575d6327160d64e760.svg    109 kB          [emitted]
               ./static/js/bundle.js    666 kB       0  [emitted]  main
                          ./main.css    126 kB       0  [emitted]  main
           ./static/js/bundle.js.map    813 kB       0  [emitted]  main
                      ./main.css.map  87 bytes       0  [emitted]  main
   [0] multi main 28 bytes 0 [built]
   [1] ./static/js/app.js 287 bytes 0 [built]
    + 29 hidden modules
Child extract-text-webpack-plugin:
        + 4 hidden modules
Child extract-text-webpack-plugin:
        + 4 hidden modules

如您所见，main.css 是与main.map.css 一起生成的，但此时它几乎没用，因为里面根本没有映射。

【参考方案1】：

最后，在尝试了无数组合之后，我想通了。使用这些 css 加载器的语法可能会让人头疼，并且随着 webpack 的发展而明显改变，因为一些适用于其他人的旧示例奇怪地不适用于我。

尽管已经有了devtools: 'source-map' 选项，我还需要从以下位置更改加载器：

 
    test:   /\.scss$/,
    loader: ExtractTextPlugin.extract(['css', 'sass'])

进入：

    test:   /\.scss$/,
    loader: ExtractTextPlugin.extract(['css-loader?sourceMap', 'sass-loader?sourceMap'])

感谢我在开发工具中检查我的 css 文件现在正确指向两个 scss 文件。