我正在尝试设置它,以便我可以编写SCSS并且有一个输出CSS文件也可以通过Autoprefixer运行。我的webpack配置正在创建styles.css文件,但该文件的内容不是CSS:
data:application/octet-stream;base64,ZXh...
/*# sourceMappingURL=styles.css.map*/
这是我的webpack配置:
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var autoprefixer = require('autoprefixer');
var precss = require('precss');
module.exports = {
entry: "./App/index.tsx",
output: {
path: "./App/Built/",
filename: "bundle.js"
},
devtool: "source-map",
resolve: {
extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js", ".scss"]
},
module: {
loaders: [
{
test: /\.tsx?$/,
loader: "ts-loader"
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style", "url!css!sass")
}
],
preLoaders: [
{ test: /\.js$/, loader: "source-map-loader" }
]
},
postcss: function () {
return [autoprefixer, precss];
},
plugins: [new ExtractTextPlugin('styles.css')],
externals: {
"react": "React",
"react-dom": "ReactDOM"
}
};
我不知道为什么我有一个base64编码的字符串而不是CSS。我怀疑它是url-loader,但webpack在没有它的情况下编译我的css。
编辑:了解了这一变化:
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style", "css!postcss!sass")
},
{
test: /\.png$/,
loader: "url-loader"
},
{
test: /\.jpg$/,
loader: "url-loader"
},
{
test: /\.woff/,
loader: "url-loader"
},
{
test: /\.ttf/,
loader: "url-loader"
}