Question

webpack新手，但目前webpack正在将样式注入到我想要禁用的文档正文中。我不知道如何做到这一点。

这是我的webpack.config.js

var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    output: {
        filename: 'bundle.js'
    },
    entry: {
        app: './js/app.js'
    },

    module: {
        loaders: [
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract({use:[{loader: 'css-loader', options: {importLoaders: 1}}, 'postcss-loader', 'sass-loader']})
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('styles.css'),
        new webpack.LoaderOptionsPlugin({options: {
            context: __dirname,
            postcss: [
                autoprefixer
            ]
        }})
    ]
};

html输出

<html>
    <head>
        <title>Test</title>
        <link rel="stylesheet" href="/wp-content/themes/index/styles.css">
        <style type="text/css">
            body {
            background-color: black; }

            h1 {
                color: #fff; }

            p {
                display: flex;
                color: #fff; }
       </style>
       <style type="text/css"></style>
    </head>
    <body>
        <h1>Test</h1>
        <p>Test</p>
        <script src="/wp-content/themes/index/dist/bundle.js"></script>
    </body>
</html>

正如你所看到的那样，它仍然注入了与我所拥有的scss文件不匹配的css。它也不是flex属性的前缀，也不包括我在sass文件中的导入。

main.scss

@import 'test';

body {
    background-color: black;
}

h1 {
    color: #fff;
}

p {
    display: flex;
    color: #fff;
    background-color: red;
}

_test.scss

h2 {
    color: blue;
}

Answer 1

您的配置需要解决三个问题。

首先，loaders内的module属性应重命名为rules。你现在拥有它的方式是webpack 1的正确方法，webpack 2+使用rules。 https://webpack.js.org/guides/migrating/#module-loaders-is-now-module-rules

其次，LoaderOptionsPlugin用于从webpack 1迁移到webpack 2.您可以阅读here。

将选项附加到postcss-loader的新推荐方法如下所示。

{
   loader: 'postcss-loader',
   options: {
       plugins: [autoprefixer()]
   }
}

完成上述配置后，您的css应该加上前缀，您可以安全地从webpack.LoaderOptionsPlugin数组中删除plugins。

最后，如果您上面提供的信息是正确的，_test.scss未包含在最终捆绑中，因为在main.scss中您有

@import 'test';

将其更改为导入_test，您应该会看到它包含在捆绑包中。

禁止webpack注入CSS / Autoprefixer不起作用

1 个答案: