这就是我现在的位置:
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 string。 in that case node-sass
(libsass
)不返回源地图。但即使给定文件,后者也会返回生成css code的源映射,而不是由于某种原因返回sass代码。任何变通办法都是受欢迎的,即使是丑陋的。
答案 0 :(得分:0)
好吧,libsass
没有为内联内容生成源地图的问题似乎是taken care of。只是libsass
返回带有scss code的源地图,即使给出了sass代码。所以我把它误认为是css。