Webpack提取的css编码?

时间:2016-07-13 16:17:15

标签: reactjs sass webpack autoprefixer

我正在尝试设置它,以便我可以编写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"
        }

0 个答案:

没有答案