extract-text-webpack-plugin - 提取scss导致main.css.map中没有映射 [英] extract-text-webpack-plugin - extracting scss results in no mapping in main.css.map

问题描述

我已经设法提取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'
]，
 
输出：{
 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'）; 
  

终端：

 散列：28bc2c1ea9d333be2975 
版本：webpack 1.13.3 
时间：3500ms 
资源大小块大小块名称
 89889688147bd7575d6327160d64e760.svg 109 kB [emit] 
 ./static/js/bundle.js 666 kB 0 [emit] main 
 ./main.css 126 kB 0 [发射] main 
 ./static/js/bundle.js.map 813 kB 0 [emit] main 
 ./main.css.map 87 bytes 0 [emit] main 
 [0]多主要28字节{0} [built] 
 [1] ./static/js/app.js 287 bytes {0} [built] 
 + 29隐藏模块
子提取文本-webpack-plugin：
 + 4隐藏模块
子提取文本webpack插件：
 + 4隐藏模块
  

正如你可以看到 main.css 与 main.map.css <

解决方案

最后，在努力与许多组合，我想出来了。

尽管如此，使用这些css加载器的语法可能会引起头痛，并且显然会随着webpack的发展而改变。已经具有 devtools：'source-map'选项我还需要更改装载器：

 code> {
 test：/\.scss$/，
 loader：ExtractTextPlugin.extract（['css'，'sass']）
} 
  
 
 
 
 into：
  {
 test：/\.scss$/，
 loader：ExtractTextPlugin.extract（['css-loader？sourceMap'，'sass-loader？sourceMap']）
} 
 
并且感谢这检查我的css文件在Dev工具正确指向两个scss文件。
 
I've managed to extract 2 scss files into 1 css file, but I've noticed the source and mappings in main.css.map are empty:
{"version":3,"sources":[],"names":[],"mappings":"","file":"./main.css","sourceRoot":""}

My 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")
    ]
};

My 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's output from terminal:
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
As you can see main.css is generated along with main.map.css, but at this point it's pretty useless, because inside there is no mapping at all.
解决方案
Finally, after struggling with numerous combinations, I figured it out. Syntax for using these css loaders can give a headache and apparently was changed as webpack evolved, because some older examples that work for others oddly didn't work for me.

Despite already having devtools: 'source-map' option I also needed to change loaders from:
{ 
    test:   /\.scss$/,
    loader: ExtractTextPlugin.extract(['css', 'sass'])
}
into:
{
    test:   /\.scss$/,
    loader: ExtractTextPlugin.extract(['css-loader?sourceMap', 'sass-loader?sourceMap'])
}
and thanks to this inspecting my css file in Dev Tools is correctly pointing to both scss files now.

                        
这篇关于extract-text-webpack-plugin  - 提取scss导致main.css.map中没有映射的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！