如何在多页面应用程序中制作webpack,sass和源地图?

时间:2016-11-20 18:36:25

标签: javascript sass webpack source-maps

这就是我现在的位置:

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 /等等,如果有的话。我做错了什么?

UPD

据我所知,sass-loader传递了文件as a stringin that case node-sasslibsass)不返回源地图。但即使给定文件,后者也会返回生成css code的源映射,而不是由于某种原因返回sass代码。任何变通办法都是受欢迎的,即使是丑陋的。

1 个答案:

答案 0 :(得分:0)

好吧,libsass没有为内联内容生成源地图的问题似乎是taken care of。只是libsass返回带有scss code的源地图,即使给出了sass代码。所以我把它误认为是css。