9. webpack4-vue2 CSS 功能增强Vue2 基于 webpack4 搭建项目，增强对 CSS 处理与支

vue2-webpack4-project

1、Sass

1.1 安装

  yarn add sass-loader@10.3.1 sass -D

v11.0.0 最低兼容 webpack5

1.2 编辑 webpack.config.js

<!--变更部分-->
{
    test: /\.s[ac]ss$/i,
    use: [
        // 开发模式：style-loader ；生产模式：MiniCssExtractPlugin
        devMode ? "style-loader" : MiniCssExtractPlugin.loader,
        // Translates CSS into CommonJS
        "css-loader",
        // Compiles Sass to CSS
        "sass-loader",
    ],
},

1.3 编辑 App.vue

<!--变更部分-->
<template>
<div class="hello" @click="textClick">
  Hello webpack !
  <img :src="iconImage" class="image">
  <img :src="iconImage2" class="image">
  <img :src="chartImage" class="image">
</div>
</template>

<style lang="scss">
.hello {
  color: red;
  /*引用字体*/
  font-family: "MyFont";
  .image{
    width: 300px;
    height: 300px;
  }
}
</style>

1.4 打包

<!--main.css 格式化后方便查看-->
@font-face {
    font-family: MyFont;
    font-style: normal;
    font-weight: 600;
    src: url(c05a24bab81b62ecb5db2ffcef97e5a1.ttf)
}

.hello {
    color: red;
    font-family: MyFont
}

.hello .image {
    height: 300px;
    width: 300px
}

2、Browserslist

用于在不同前端工具之间共享目标浏览器和 Node.js 版本的配置。它用于：

Autoprefixer
Babel
postcss-preset-env
eslint-plugin-compat
stylelint-no-unsupported-browser-features
postcss-normalize
obsolete-webpack-plugin

2.1 配置文件查找方式

.browserslistrc 当前或者父目录
当前或者父目录 package.json文件中 browserslist 值
browserslist 当前或者父目录
BROWSERSLIST 环境变量
如果上述方式都不存在，将使用默认配置: > 0.5%, last 2 versions, Firefox ESR, not dead

2.2 添加配置文件

在根目录创建.browserslistrc，并添加内容

# 文件需要再当前文件夹或父文件夹
# > 0.5%, last 2 versions, Firefox ESR, not dead
> 0.2%

3、PostCSS

通过PostCSS 简介可以了解到：

不是像 Sass 或 Less 一样的预处理器，但是可以很容易地与 Sass、Less 等工具集成
是 CSS 语法转换工具
有着重要地位，大量好用的工具，如 Autoprefixer, Stylelint, CSSnano都是建立在其生态系统上

需要注意的是 Vue Loader v15 不再默认应用 PostCSS 变换。需要通过 postcss-loader 使用 PostCSS； Webpack4 版本需要使用 postcss-loader@4.3.0 版本，更新的版本要求 Webpack5 。

3.1 安装

yarn add postcss-loader@4.3.0 -D

3.2 通过 postcssOptions 配置

<!-- webpack.config.js 变更部分代码（仅作示例不能直接使用）-->
{
    test: /\.css$/i,
    use: [
      "style-loader",
      "css-loader",
      {
        loader: "postcss-loader",
        options: {
          postcssOptions: {
            plugins: [
              [
                "postcss-preset-env",//仅作示例不能直接使用
                {
                  // Options
                },
              ],
            ],
          },
        },
      },
    ],
}

3.3 通过 postcss.config.js 配置

<!-- webpack.config.js 变更部分代码（仅作示例不能直接使用）-->
   //添加 css 支持
    {
        test: /\.css$/i,
        // use: ['style-loader', 'css-loader']
        // 开发模式：style-loader ；生产模式：MiniCssExtractPlugin
        use: [devMode ? "style-loader" : MiniCssExtractPlugin.loader, 'css-loader',"postcss-loader"]
    },

然后在根目录创建 postcss.config.js 文件

<!-- postcss.config.js （仅作示例不能直接使用）-->
module.exports = {
  plugins: [
    [
      "postcss-preset-env",
      {
        // Options
      },
    ],
  ],
};

4、 Autoprefixer

利用从 Can I Use 网站获取的数据为 CSS 规则添加特定厂商的前缀。 Autoprefixer 自动获取浏览器的流行度和能够支持的属性，并根据这些数据自动为 CSS 规则添加前缀。

4.1 安装

 yarn add autoprefixer -D

4.2 编辑`postcss.config.js` 文件

module.exports = {
    plugins: [
        [
            require("autoprefixer")
        ],
    ],
};

4.3 编辑 webpack.config.js

<!--仅展示变化部分-->
//添加 css 支持
{
    test: /\.css$/i,
    // use: ['style-loader', 'css-loader']
    // 开发模式：style-loader ；生产模式：MiniCssExtractPlugin
    use: [devMode ? "style-loader" : MiniCssExtractPlugin.loader, 'css-loader', "postcss-loader"]
},
//添加 sass 支持
{
    test: /\.s[ac]ss$/i,
    use: [
        // 开发模式：style-loader ；生产模式：MiniCssExtractPlugin
        devMode ? "style-loader" : MiniCssExtractPlugin.loader,
        // Translates CSS into CommonJS
        "css-loader",
        "postcss-loader",
        // Compiles Sass to CSS
        "sass-loader",
    ],
},

4.4 编辑 App.vue

参考 Autoprefixer CSS online 给出的测试样例;

<!--仅展示变化部分-->
<style lang="scss">
.hello {
  color: red;
  transition: all .5s;
  /*引用字体*/
  font-family: "MyFont";
  .image{
    width: 300px;
    height: 300px;
  }
}
</style>

4.5 编辑 .browserslistrc

# 文件需要再当前文件夹或父文件夹
# > 0.5%, last 2 versions, Firefox ESR, not dead
# > 0.2%
# 测试自动补全浏览器厂商前缀使用
last 4 versions

4.6 打包

查看格式化后的main.css文件,可以看到明显的前缀

@font-face {
    font-family: MyFont;
    font-style: normal;
    font-weight: 600;
    src: url(c05a24bab81b62ecb5db2ffcef97e5a1.ttf)
}


.hello {
    color: red;
    font-family: MyFont;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s
}

.hello .image {
    height: 300px;
    width: 300px
}

5、 postcss-preset-env

How does it work?

PostCSS Preset Env 是 PostCSS的一个插件包，
将最新的 CSS 语法转换成大多数浏览器都能理解的语法（此功能基于 cssdb 实现）
集成了 Autoprefixer

5.1 安装

 yarn add postcss-preset-env -D

5.2 编辑`postcss.config.js` 文件

webpack

const postcssPresetEnv = require('postcss-preset-env');
module.exports = {
    plugins: [
        [
            // require("autoprefixer"),
            postcssPresetEnv()
        ],
    ],
};

5.3 选取一个属性进行验证

在没有任何配置的情况下，默认支持到 Stage 2 功能，根据 What are the stages? 了解到相关定义，

类别	定义	解释
Stage 0	Aspirational	由W3C工作组成员支持的非正式草案或编辑草案。它应该被认为是高度不稳定的，并且可能会发生变化。
Stage 1	Experimental	由W3C工作组支持的编辑草稿或早期工作草稿。它应该被认为是高度不稳定的，并且可能会发生变化。
Stage 2	Allowable	由W3C工作组支持的工作草案。它应该被认为是相对不稳定的，并且可能会发生变化。
Stage 3	Embraced	由W3C工作组支持的候选推荐，通常由至少两家公认的浏览器厂商实现，可能是在旗帜后面。它应该被认为是稳定的，几乎不会发生变化。
Stage 4	Standardized	由W3C支持的推荐。它应该由所有公认的浏览器供应商实现。
Rejected	Rejected	被WC拒绝或忽略的方案

然后通过 cssdb 列表选择 Custom Media Queries 进行验证。

<!--使用这个属性在 index.css 中验证-->

@custom-media --narrow-window (max-width: 30em);

@media (--narrow-window) {
    .hello{
        color: red;
    }
}

5.4 打包后进行对比

<!--未开启 postcss-preset-env-->
@custom-media --narrow-window (max-width: 30em); @media (--narrow-window ) {
    .hello {
        color: red
    }
}

<!--已开启 postcss-preset-env-->

@media (max-width: 30em) {
    .hello {
        color: red
    }
}

9. webpack4-vue2 CSS 功能增强