ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS を処理する Webpack の例の詳細な紹介
1. プラグインをインストールします
npm i style-loader css-loader --save-dev npm i postcss-loader --save-dev npm i autoprefixer --save-dev npm install postcss-import --save-dev
style-loader プラグイン: c9ccee2e6ea535a969eb3f532ad9fe89 を挿入して DOM に CSS を追加します。
autoprefixer はプレフィックス
postcss- を自動的に追加します。 import: @ import の使用をサポートし、css
2 を導入します。 プロジェクトのディレクトリ構造:
common.css は:
@import './flex.css'; html,body{ padding: 0; margin: 0; background-color: red; }ul{ list-style: none; margin: 0; }
flex.css は:
.flex-p{ display: flex; }
アプリ.js は:
import './css/common.css'; import layer from './components/layer/layer.js'const App = function(){ console.log(layer) }new App()
3. webpack.config.js 構成ファイルは:
var htmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/app.js', output: { path: __dirname + '/dist', filename: 'js/[name].js' }, module: { loaders: [{ test: /\.js$/, //以下目录不处理 exclude: /node_modules/, //只处理以下目录 include: /src/, loader: "babel-loader", //配置的目标运行环境(environment)自动启用需要的 babel 插件 query: { presets: ['latest'] } }, //css 处理这一块 { test: /\.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { //支持@important引入css importLoaders: 1 } }, { loader: 'postcss-loader', options: { plugins: function() { return [ //一定要写在require("autoprefixer")前面,否则require("autoprefixer")无效 require('postcss-import')(), require("autoprefixer")({ "browsers": ["Android >= 4.1", "iOS >= 7.0", "ie >= 8"] }) ] } } } ] } ] }, plugins: [ new htmlWebpackPlugin({ template: 'index.html', filename: 'index.html' }) ] }
4. コンパイルを実行して結果を表示します
npm run webpack
以上がCSS を処理する Webpack の例の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。