【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發現問題解決