webpack4.x postcssローダーを使用して、autoprefixerは自動的に別のブラウザ3 CSSプロパティの設定するには、プレフィックスを追加します

主要なマスタブラウザとの互換性のために、我々はCSS関連の属性を記述する際に、我々はWebPACKの自動処理を通して私たちを助けるために必要があるので、我々は接頭辞それぞれ互換性のあるブラウザを追加する必要がありますが、自分では非常に時間がかかり、効率に影響を与えています。

例えば、フレックス属性の表示：

div {
	display: flex
}

私たちの需要は次のとおりです。

div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

だから、ダウン、我々はこの問題を解決するつもりです。

まず、インストール

 npm install postcss-loader autoprefixer -D

• いくつかの一般的なCSSプリプロセッサSASS SASS-ローダーレスレスローダスタイラススタイラスローダが自分たちのニーズをインストールすることができます。

第二に、使用

1.簡単な構成webpack.config.js
2.設定webpack.config.jsとpackage.json
の構成3. webpack.config.jsとpostcss.config.jsを作成

1.シンプルな設定webpack.config.js

{
    test: /\.less$/,
    use: [{
            loader: 'style-loader'
        },
        {
            loader: 'css-loader'
        },
        {
            loader: 'postcss-loader',
            options: {
                plugins: [
                    require('autoprefixer')({
                        //必须设置支持的浏览器才会自动添加浏览器兼容
                        //注意：
                        //使用browsers属性也是可以编译生效，但编译中会提示下图中警告，可能会发生错误
                        //所以还是推荐使用overrideBrowserslist这个属性
                        overrideBrowserslist: [
                            "defaults",
                            "not ie <= 8",
                            "last 2 versions",
                            "> 1%",
                            "iOS >= 7",
                            "Android >= 4.0"
                        ]
                    })
                ]
            }
        },
        {
            loader: 'less-loader'
        }
    ]
}

設定webpack.config.jsとpackage.json
まずautoprefixer導入はpostcssローダーを使用してウィジェット設定ファイルをwebpack.config.js

{
    test: /\.less$/,
    use: [{
            loader: 'style-loader'
        },
        {
            loader: 'css-loader'
        },
        {
            loader: 'postcss-loader',
            options: {
                //引入autoprefixer插件
                plugins: [
                    require('autoprefixer')
                ]
            }
        },
        {
            loader: 'less-loader'
        }
    ]
}

次に、（devDependencies同じレベルで）package.jsonファイルブラウザの設定サポートを追加

"browserslist": [
    "defaults",
    "not ie <= 8",
    "last 2 versions",
    "> 1%",
    "iOS >= 7",
    "Android >= 4.0"
  ]

3.構成はwebpack.config.jsとpostcss.config.js作成
postcssローダ、同じ方法2を使用して導入autoprefixerプラグまずwebpack.config.js設定ファイルを

{
    test: /\.less$/,
    use: [{
            loader: 'style-loader'
        },
        {
            loader: 'css-loader'
        },
        {
            loader: 'postcss-loader',
            options: {
                //引入autoprefixer插件
                plugins: [
                    require('autoprefixer')
                ]
            }
        },
        {
            loader: 'less-loader'
        }
    ]
}

Postcss.config.jsその後webpack.config.jsと同じディレクトリに設定ファイルを作成し、以下のように、構成は次のとおりです。

module.exports = {
    plugins: [
        require('autoprefixer')({
            //必须设置支持的浏览器才会自动添加添加浏览器兼容
            browsers: [
                "defaults",
                "not ie <= 8",
                "last 2 versions",
                "> 1%",
                "iOS >= 7",
                "Android >= 4.0"
            ]
        })
    ]
}

追伸

自分たちのニーズによると、あなたはこれらの3つの方法のいずれかを選択することができます。