如何使 webpack、sass 和 source maps 在多页面应用程序中运行？答案

【问题标题】：How to make webpack, sass and source maps go along in a multi page app?如何使 webpack、sass 和 source maps 在多页面应用程序中运行？
【发布时间】：2016-11-20 18:36:25
【问题描述】：

这是我现在的位置：

package.json:

{
  "dependencies": {
    "css-loader": "^0.26.0",
    "html-webpack-plugin": "^2.24.1",
    "node-sass": "^3.13.0",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.3"
  }
}

webpack.config.js:

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './1.js',
    output: {
        path: 'dist',
        filename: 'bundle.js',
    },
    module: {
        loaders: [
            {test: /\.sass$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap']},
        ]
    },
    plugins: [
        new HtmlWebpackPlugin,
    ],
};

1.js:

require('./1.sass');

1.sass:

body
    background: #ddd

然后

$ rm -f dist/* && ./node_modules/.bin/webpack

然后在 Chrome 中打开 http://example.com/dist。然后打开Developer Tools > Sources > top > webpack:// > . > 1.sass。在那里你会看到 css 代码，而不是 sass 代码。 devtool 用于 js/coffeescript/whatever，如果有的话。我做错了什么？

UPD

据我所知，sass-loader 传递了文件 as a string。而in that case node-sass (libsass) 不会返回源映射。但即使给定文件，后者也会返回带有生成的css code 的源映射，而不是出于某种原因的 sass 代码。欢迎任何变通方法，即使丑陋。

【问题讨论】：

试试devtool: 'source-map'和sass loader上的sourceMap查询：loaders: ['style', 'css?sourceMap', 'sass?sourceMap']
@jali-ai That's 你如何将 map 传递给下一个加载器，但 css-loader doesn't pass 它更进一步。 Css 源映射独立于 js 源映射。至于sourceMap参数，看了sass-loader的代码，sourceMap参数确实有作用，但还是不行。是的，我用你的更正检查了它。无济于事:(如果有某种解决方法，即使丑陋...
实际上它映射到sass文件的等效scss代码。所以它以某种方式工作，但并不完全符合您的期望。如果你使用一个变量或其他东西在 css 和 scss 之间产生不同，你可以看到它。
我只是指出了一些需要注意的地方。我认为您可以提供通过搜索收集到的更多有用信息作为答案。

标签： javascript sass webpack source-maps

【解决方案1】：

嗯，libsass 没有为内联内容生成源映射的问题似乎是taken care of。只是libsass 返回带有scss code 的源映射，即使给定了sass 代码。所以我把它误认为是css。

【讨论】：