“This is the 7th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

1. postcss-loaderThe use of

In real development, we will not directly use the command line tool to process CSS, but will use the build tool to achieve, in webpack, using PostCSS is through the use of postCSS-loader to achieve.

/ SRC/CSS /style. CSS and add the user-select attribute:

.title {
  color: red;
  font-size: 30px;
  font-weight: 700;

  user-select: none;
}
Copy the code

We want to add a browser prefix to this user-select property after we pack it. Let’s run the NPM run build command and see what happens:

As you can see, by default (webPack is not told to use PostCSS), WebPack does not prefix CSS properties with browsers.

If we want webpack to pack CSS properties with browser prefixes, we need to add postCSS-loader to handle CSS files when webPack loads them. Postcss-loader: postCSs-loader

npm install postcss-loader -D
Copy the code

Note: PostCSs-loader relies on PostCSS, so you also need to install postCSS, but we have already installed it, so we don’t install it here. Postcss-loader is used to use postCSS in webpack.

Then open webpack.config.js and change it as follows:

.module.exports = {
  ...
  module: {
    rules: [{test: /\.css$/,
        use: [
          'style-loader'.'css-loader'.'postcss-loader' // Add postCSs-loader to process CSS files]},... ] }}Copy the code

If you run the NPM run build command to package the page, you will see that the user-select attribute is still not prefixed by the browser. The reason for this is that we’ve already said that for PostCSS to work, you have to specify which plug-ins to use, and we haven’t specified the PostCSS plug-ins to use. Therefore, when we need to use the postcss – loader, specify to use postcss plug-in, webpack. Config. The contents of the js modified as follows:

.module.exports = {
  ...
  module: {
    rules: [{test: /\.css$/,
        use: [
          'style-loader'.'css-loader',
          {
            loader: 'postcss-loader'.// Add postCSs-loader to process CSS files
            options: {
              postcssOptions: { // Set PostCSS options and plug-ins
                plugins: [
                  require('autoprefixer') // Use the autoprefixer plugin}}}]},... ] }}Copy the code

After the configuration is complete, run the NPM run build command to package and check the page effect:

As you can see, the browser prefix has been successfully added this time.

However, you may think that putting PostCSS configuration items directly in webpack.config.js is too much. Can you extract the configuration information? Yes, we can create a new postcss.config.js file in our project directory and transfer the configuration information we want to extract from webpack.config.js to this file as follows:

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

Postcss-loader: postcss-loader: postcss-loader: postCSs-loader: postCSs-loader: postCSs-loader

.module.exports = {
  ...
  module: {
    rules: [{test: /\.css$/,
        use: [
          'style-loader'.'css-loader'.'postcss-loader']},... ] }}Copy the code

After extracting the PostCSS configuration file, webpack interprets the PostCSS-loader like this: Postcss.config. js, postcss.config. CJS, postcss.config. CJS, postcss.config. CJS, postcss.config. If there is an exported object, the contents of the exported object are treated as configuration information for PostCSS.

If you write the PostCSS configuration information in the loader option in the WebPack configuration file and use the PostCSS configuration file, the configuration information in the two places is combined and the configuration in the loader option takes precedence (the configuration in the loader option overrides the configuration in the configuration file).

In fact, we don’t need autoprefixer to configure the plugin when configuring postCSs-Loader, we usually use another plugin: PostCSs-preset -env:

  • PostCSS Preset EnvIs also aPostCSSPlug-in;
  • It can help us bring something modernCSSFeatures that most browsers recognizeCSSDepending on the target browser or runtime environmentpolyfill;
  • Also included will automatically help us addautoprefixerThat is, it’s already built inautoprefixer;

To use postCSS-preset -env, we need to install it first:

npm install postcss-preset-env -D
Copy the code

Then, we just replace autoprefixer with postCSs-preset -env:

plugins: [
  require('postcss-preset-env')]Copy the code

After running the NPM run build command to pack, the browser looks the same as before. But this plugin is more powerful than Autoprefixer. For example, we modified the code in./ SRC/CSS /style.css as follows:

.title {
  color: # 12345678; / / use8The color value of a hexadecimal numberfont-size: 30px;
  font-weight: 700;

  user-select: none;
}
Copy the code

In the past, you could use a six-digit hexadecimal number to represent a color. Now, the new CSS feature allows you to use an eight-digit hexadecimal number to represent a color, with the last two digits representing transparency. So, we can now write 8-bit hexadecimal numbers to set colors, but currently, some browsers don’t support this format, which means we need to convert this format to normal RGBA format. If we were using the Autoprefixer plugin it wouldn’t help us with the conversion, but we are using the PostCSS-PRESET -env plugin which automatically helps us convert 8-bit hexadecimal format to RGBA format. Color: #12345678

Supplement:

  1. We’re using somepostcssPlugins can also pass strings directly:
module.exports = {
  plugins: [
    'postcss-preset-env']}Copy the code
  1. In writingcss 和 lessWhen processing rule objects for type files, we can also write together:
.module.exports = {
  ...
  module: {
    rules: [{test: /\.(css|less)$/i,
        use: [
          'style-loader'.'css-loader'.'postcss-loader'.'less-loader'}]}}Copy the code

Finally, to summarize the PostCSS utility’s features:

  • PostCSSIs awithJSPlug-in transformation StyleThe tools;
  • These plug-ins can check (lint) yourCSS, support variables and mixin (mixins), compiling advanced versions that are not yet widely supported by browsersCSSSyntax, inline images, etc.