Question

我正在使用Webpack 4并尝试为多个浏览器添加对css的支持。

由于某种原因，我的方式不起作用。任何人都知道我们如何为webpack 4修复autoprefixer。

这是我的webpack.config

from types import MethodType

class TestClass(object):
    def method(self):
        def dynamically_defined_method(self):
            print "two"
        self.dynamically_defined_method = MethodType(dynamically_defined_method, self)

c = TestClass()
c.method()
c.dynamically_defined_method()

我需要在我的CSS中写一下：

const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const autoprefixer = require('autoprefixer');


module.exports = {
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    // 'style-loader',
                    {
                        loader: 'css-loader!autoprefixer-loader',
                        options: {
                            importLoaders: 1
                        }
                    },
                    'postcss-loader',
                ]
            },
        ],
    },
    plugins: [
        new CleanWebpackPlugin('dist', {} ),
        new HtmlWebPackPlugin({
            template: "./src/index.html",
            filename: "./index.html"
        }),
        new MiniCssExtractPlugin({
            filename: "main.css",
            chunkFilename: "[id].css"
        }),
        autoprefixer,
    ]
};

我想在dist文件夹中的css上期待什么：

body {
    display: flex; 
}

Answer 1

根据官方文档'autoprefixer-loader'已被弃用，因此可能是因为它无法使用webpack 4

使用像

这样的配置文件使用'postcss-loader'

{
   loader: 'css-loader',

}, {
   loader: 'postcss-loader',
   options: {
      config: {
        path: './tools/postcss.config.js'
      }
   }
}

并在post.config.js中提到autoprefixer

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

并提及要在package.json中支持的浏览器列表，例如"browserslist": [ "> 1%", "last 8 versions" ]

无法解决＆＃css-loader！autoprefixer-loader＆＃39;

1 个答案: