04webpack样式处理

样式处理

css-loader style-loader插件

1. 安装css-loader style-loader
   npm install css-loader style-loader -D

2. 在webpack.config.js中添加配置

// 规则 css-loader 连续 @import这种语法的
// style-loader 它是把CSS插入到head的标签中
// loader的特点 希望单一
// { test: /\.css$/, use: 'css-loader'}
// loader的用法 字符串只用一个loader
// 多个loader需要 []
// loader的顺序 默认是从右到左执行 从下到上执行
// { test: /\.css$/, use: ['style-loader','css-loader']}
// loader还可以写成 对象方式 多写个参数，方便传参
{
    test: /\.css$/,
    use: [
        {
            loader: 'style-loader'
        },
        {
            loader: 'css-loader',
            options: {
                modules: true
            }
        }
    ]
}

less-loader插件

1. 安装less-loader
   npm install less less-loader -D

2. 在webpack.config.js中添加配置
   执行顺序是从右向左，从下到上

{
    // 可以处理less文件,还有sass stylus  node-sass sass-loader
    // stylus stylus-loader
    test: /\.less$/,
    use: [
        {
            loader: 'style-loader'
        },
        {
            loader: 'css-loader', // @import 解析import路径
            options: {
                modules: true
            }
        },
        {
            loader: 'less-loader' // 把less -> css  先解析less再执行css
        }
    ]
}

抽离CSS插件：mini-css-extract-plugin插件

1. 安装mini-css-extract-plugin
   npm install mini-css-extract-plugin -D
2. 在webpack中引用mini-css-extract-plugin插件
   let MiniCssExtractPlugin = require("mini-css-extract-plugin");

样式前缀插件：postcss-loader autoprefixer

1. 安装postcss-loader autoprefixer
   npm install postcss-loader autoprefixer -D