样式处理

1.处理css样式

• css-loader分析css模块之间的关系，并合并成一个css。
• style-loader会把css-loader生成的内容，以style挂载到页面的head部分

npm install style-loader css-loader -D

 {
        test: /.css$/,
        use: [{
          loader: "style-loader",
          options: {
            injectType: "singletonStyleTag" // 将所有的style标签合并成一个
          }
        }, "css-loader"],
 },

2.less样式处理

• less-loader把less语法转化为css

npm install less less-loader -D

// loader执行顺序 从上到下，从右到左
{
        test: /.less$/,
        use: ["styleLoader", "cssLoader", "lessLoader"],
},

3.postcss

• 处理css的loader
• 需要安装postcss,postcss-loader

npm install postcss-loader postcss -D

• 配置postcss

1.在postcss-loader的options中配置

 {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    'autoprefixer',
                    {
                      // 其他选项
                    },
                  ],
                ],
              },
            },
},

2.配置文件postcss.config.js postcss.config.js

module.exports = {
    plugins: [require('autoprefixer')]
}

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /.css$/i,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      },
    ],
  },
};

Autoprefixer插件

• 可以自动在样式中添加浏览器厂商前缀，避免手动处理样式兼容问题 1.安装Autoprefixer

npm install autoprefixer -D

2.使用postcss.config.js

module.exports = {
    plugins: [require('autoprefixer')]
}

3.browserslist的配置

package.json

browserslist: ["last 2 versions", ">1%"]

项目根目录下.browserslistrc

last 2 versions
>1%

检测符合条件的有哪些浏览器

npx browserslist "last 2 versions, 1%"

cssnano

• css压缩

npm install cssnano -D

postcss.config.js

module.exports = {

    plugins: [require('autoprefixer'), require('cssnano')]

}

4.mini-css-extract-plugin

• 分离出单独的css文件 1.安装

npm install mini-css-extract-plugin -D

2.使用 webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  plugins: [new MiniCssExtractPlugin({filename: "[name].css })],
  module: {
    rules: [
      {
        test: /.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};