前書き: Webpack の CSS 処理は非常に基本的なトピックです。ただ、webpack4 では CSS ブラウザ互換性を解決するために autoprefixer を使用する際に、これまでとは異なる落とし穴が存在します。そこでこの知識について詳しく書いていきます。
1. 必要な依存関係
- style-loader: CSS ファイルを HTML ページのスタイル タグに挿入します。参考: https://www.webpackjs.com/loa...
- css-loader: js にインポートされた CSS ファイルを解析します。参考: https://www.webpackjs.com/loa...
- less-loader: css 前処理言語を解析します。他の前処理言語を使用する場合は、対応するローダーを使用する必要があります。参考: https://www.html.cn/doc/webpa...
-
postcss-loader: プロジェクトに記述した CSS の後処理:
- CSS を JavaScript が操作できる抽象構文ツリー (AST) 構造に解析します。
- プラグインを呼び出して AST を処理し、結果を取得します。
- autoprefixer: さまざまなブラウザに適応するために css にプレフィックスを付ける postcss-loader のプラグイン。
注: postcss-loader の機能は、映画やテレビのポストプロダクションとまったく同じで、すべての元のファイルを結合し、プラグインを使用して特殊効果を追加し、最後に出力します。完成品。 autoprefixer プラグインは、postcss-loader によって解析された AST に対して後処理を実行します。
2. 依存関係をインストールします
npm install --save-dev less-loader less style-loader css-loader postcss-loader autoprefixer
3. 少ないテスト ファイル style.less
#world{
display: flex;
} を作成します#4. style.less
import './style.less';をメイン ファイルindex.js にインポートします5、webpack設定ファイルwebpack.config.js
module: {
rules: [
{
test: /\.less$/,
use: [
'style-loader',
{loader: 'css-loader', options: { importLoaders: 1 } },
'less-loader',
'postcss-loader'
]
},
]
}css-loaderのimportLoaders:1は非常に重要な設定です。これにより、解析されたすべての CSS が 1 つのスタイル タグのみに挿入されます。この設定を行わないと、新しい CSS ファイルが挿入されるたびに新しいスタイル タグが作成されます。ブラウザによっては、スタイル タグの数に制限がある場合があります。 6 番目に、postcss 構成ファイル postcss.config.js を作成し、自動プレフィクサー プラグインを導入します
module.exports = {
plugins: [
require('autoprefixer')
]
} 7 番目に、package.json にブラウザー リスト browserslist を追加します。これが序文で述べた落とし穴です。これがないと自動プレフィクサーは機能しません
{
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --mode development"
},
"browserslist": [
"defaults",
"not ie < 11",
"last 2 versions",
"> 1%",
"iOS 7",
"last 3 iOS versions"
]
} 8、コマンド
npm run buildを実行します 9、CSS の解析が成功すると、結果は次のようになります:
#world {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}