preface

  • Q: Why use loader?
    • Webpack can only understand js files, and Loader can convert all types of files to files that WebPack can handleEffective module.
  • Q: What loaders are available in this section?
    • Style-loader, CSS-loader, less-loader, Sas-loader, and postCSS-loader

The CSS file

css-loader

  1. Download related loader yarn add style-loader CSS-loader –dev

  2. Add rules to the webpack.config.js file

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

    Loaders are loaded from right to left. Cs-loader: converts the contents of the. CSS file into JS strings. Style-loader: dynamically creates

  3. Create the SRC/CSS /base.css file



    Base. CSS file contents



    Add index.html

  4. In the entry file, import the.css file

  5. Run the yarn build command

  6. Effect of the page

Process. Less files

less-loader

  1. Download related loader yarn add style-loader CSS-loader –dev yarn add less-loader less –dev

    Note: less is the command for converting. Less files

  2. Add rules to the webpack.config.js file

    {
  test: /\.less$/,
  use: ['style-loader'.'css-loader'.'less-loader']}Copy the code

    Loaders are loaded from right to left. Less-loader: converts. Less files to. CSS files. Cs-loader: converts. Dynamically create a

  3. Create the SRC /less/base.less file

  4. In the import file, import the.less file



    Less File content



    Add index.html

  5. Run the yarn build command

  6. Effect of the page

Process.scss/.sass files

sass-loader

  1. Download related loader yarn add style-loader CSS-loader –dev yarn add sass-loader node-sass –dev

    SCSS /. Sass file command If the node – sass installation failure, the execution of yarn config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/ – g

  2. Add rules to the webpack.config.js file

    {
  test: /\.s(a|c)ss$/,
  use: ['style-loader'.'css-loader'.'sass-loader']}Copy the code

    The loading sequence of the loader is from right to left. Sass-loader: converts. SCSS /. Sass files to. CSS files. Dynamically create a

  3. Create the SRC/SCSS /base.scss file



    . SCSS file content



    Add index.html

  4. In the import file, import the.scss file

  5. Run the yarn build command

  6. Effect of the page

Styles fit browsers, automatically add prefixes, and enhance project compatibility

postcss-loader

  1. Download loader and related YARN add postcss-loader autoprefixer –dev

    Note: Autoprefixer is a PostCSS plug-in that automatically adds the required prefixed attribute declarations. Note: PostCSS also requires browserslist to be configured

  2. Postcss.config.js (PostCSS configuration file)

    module.exports = {
  plugins: [
      // Import plug-ins
      require('autoprefixer')]};Copy the code

  3. Modify rules in the webpack.config.js file

    Postcss-loader prefixes (.less or.scss) converted.css files

  4. Modify base. CSS, base.less, base. SCSS files (add prefixed attributes)

  5. Run the yarn build command

  6. Generate code effects

    CSS:

    Less:

    SCSS:

link

Webpack Basic Configuration (2) Webpack Basic Configuration (4)