【webpack4x】postcss-loader無法自動添加瀏覽器前綴問題

沒有設置瀏覽器類型導致的無法生效

// 1. npm install postcss-loader autoprefixer --save

// 2. 在項目根目錄下新建 postcss.config.js
// 注意： 如果沒有配置在哪些瀏覽器上自動添加前綴，會無法添加成功
// postcss.config.js
module.exports = {
    plugins: [
        require('autoprefixer')({
            "browsers": [
                "defaults",
                "not ie < 11",
                "last 2 versions",
                "> 1%",
                "iOS 7",
                "last 3 iOS versions"
            ]
        })
    ]
}


// 3. 在webpack配置文件中配置對應
...
{
    test: /\.css$/,
    use: [‘style-loader’, 'css-loader', 'postcss-loader']
}, {
    test: /\.sass$/,
    use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
}

上述可以完成添加瀏覽器前綴，但是會報個警告
Replace Autoprefixer browsers option to Browserslist config.
Use browserslist key in package.json or .browserslistrc file.

Using browsers option cause some error. Browserslist config
can be used for Babel, Autoprefixer, postcss-normalize and other tools.

If you really need to use option, rename it to overrideBrowserslist.

Learn more at:
https://github.com/browserslist/browserslist#readme
https://twitter.com/browserslist

解決辦法

// postcss.config.js 改
// postcss.config.js
module.exports = {
    plugins: [
        require('autoprefixer')()
    ]
}

// 然后在package.json中添加配置項
"browserslist": [
    "defaults",
    "not ie < 11",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ]

github文檔地址

在單獨打包css文件時遇到的問題

ERROR in ./src/index.sass
Module build failed (from ./node_modules/_mini-css-extract-plugin@0.8.0@mini-css-extract-plugin/dist/loader.js):
ReferenceError: document is not defined

{
    test: /\.css$/,
    use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
}, {
    test: /\.sass$/,
    use: [MiniCssExtractPlugin.loader,  'css-loader', 'postcss-loader', 'sass-loader']
}

mini-css-extract-plugin是將css打包成獨立的css文件，而style-loader是將css以style標簽的方式插入樣式，是不是彼此存在沖突，於是刪除style-loader發現問題解決