Processing style resources

Webpack itself cannot recognize style resources and needs to use Loader to parse style resources. You should first find the corresponding Loader from Webpack official Loader document. If you can't find it, you can search and query from the community or GitHub.

Process CSS resources

Two Loaders are needed:

css-loader: compile CSS files into modules recognized by Webpack
style-loader: dynamically create a Style tag and put the CSS module content into it

Installation:

npm
Yarn
pnpm

npm i css-loader style-loader -D

yarn add css-loader style-loader --dev

pnpm add css-loader style-loader -D

Append the following highlighted content to the configuration file:

webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  module: {
    rules: [
      {
        // used to match files ending with .css
        test: /\.css$/,
        // Loader in the use array The execution order is from right to left
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [],
  mode: 'development',
};

At this point, the configuration is complete and Webpack can process CSS files correctly. Create a CSS file and import it into the JS file according to the following example, and repackage it to show the effect.

src/css/index.css
.box1 {
  width: 100px;
  height: 100px;
  background-color: pink;
}

src/main.js
import count from './js/count';
import sum from './js/sum';
// Import CSS resources, Webpack will package them
import './css/index.css';

console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));

public/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webpack5</title>
    <!-- Import the packaged js file to see the effect -->
    <script src="../dist/main.js"></script>
  </head>
  <body>
    <h1>Hello Webpack5</h1>
    <!-- Prepare a DOM container with styles -->
    <div class="box1"></div>
  </body>
</html>

Run command

npx webpack

Open the index.html page to see the effect

Effect diagram

Process Less resources

You need to use less-loader to compile Less files into CSS files.

Installation:

npm
Yarn
pnpm

npm i less-loader -D

yarn add less-loader --dev

pnpm add less-loader -D

Append the following highlighted content to the configuration file. **Note! Since these loaders only compile style files into CSS files, the CSS configuration cannot be deleted or changed. The execution order here is from top to bottom:

webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  module: {
    rules: [
      {
        // Used to match files ending with .css
        test: /\.css$/,
        // The order of loader execution in the use array is from right to left
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader'],
      },
    ],
  },
  plugins: [],
  mode: 'development',
};

Now that it is configured, Webpack can process Less files correctly. Create a Less file and import it into the JS file according to the following example, and repackage it to show the effect.

src/less/index.less
.box2 {
  width: 100px;
  height: 100px;
  background-color: deeppink;
}

src/main.js
import count from './js/count';
import sum from './js/sum';
// Import resources, Webpack will package them
import './css/index.css';
import './less/index.less';

console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));

public/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webpack5</title>
    <!-- Import the packaged js file to see the effect -->
    <script src="../dist/main.js"></script>
  </head>
  <body>
    <h1>Hello Webpack5</h1>
    <!-- Prepare a DOM container using styles -->
    <div class="box1"></div>
    <!-- Prepare a second DOM container using styles -->
    <div class="box2"></div>
  </body>
</html>

Run command

npx webpack

Open index.html Page viewing effect

Effect image

Process Sass and Scss resources

You need to use sass-loader to compile sass and scss files into CSS files. Since sass-loader depends on sass for compilation, you need to download the sass package.

Installation:

npm
Yarn
pnpm

npm i sass-loader sass -D

yarn add sass-loader sass --dev

pnpm add sass-loader sass -D

webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  module: {
    rules: [
      {
        // Used to match files ending with .css
        test: /\.css$/,
        // The order of Loader execution in the use array is from right to left
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader'],
      },
      {
        test: /\.s[ac]ss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
  plugins: [],
  mode: 'development',
};

Now it is configured, Webpack can process Sass files correctly. Create Sass and Scss files according to the following example and import them into JS file, and repackage to show the effect.

src/sass/index.sass
.box3
width: 100px
height: 100px
background-color: hotpink

src/sass/index.scss
.box4 {
  width: 100px;
  height: 100px;
  background-color: lightpink;
}

src/main.js
import count from './js/count';
import sum from './js/sum';
// Import resources, Webpack will package them
import './css/index.css';
import './less/index.less';
import './sass/index.sass';
import './sass/index.scss';

console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));

public/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webpack5</title>
  </head>
  <body>
    <h1>Hello Webpack5</h1>
    <div class="box1"></div>
    <div class="box2"></div>
    <!-- Prepare the third and fourth DOM containers for using styles -->
    <div class="box3"></div>
    <div class="box4"></div>
    <script src="../dist/main.js"></script>
  </body>
</html>

Run command

npx webpack

Open the index.html page to view the effect

Effect image

Process Stylus resources

Stylus-loader is needed to compile Stylus files into CSS files.

Install:

npm
Yarn
pnpm

npm i stylus-loader -D

yarn add stylus-loader --dev

pnpm add stylus-loader -D

webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  module: {
    rules: [
      {
        // Used to match files ending with .css
        test: /\.css$/,
        // The order of loader execution in the use array is from right to left
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader'],
      },
      {
        test: /\.s[ac]ss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.styl$/,
        use: ['style-loader', 'css-loader', 'stylus-loader'],
      },
    ],
  },
  plugins: [],
  mode: 'development',
};

Now it is configured, Webpack can handle Stylus files correctly. Create a Stylus file and import it into the JS file according to the following example, and repackage it to show the effect.

src/styl/index.styl
.box5
width 100px
height 100px
background-color pink

src/main.js
import { add } from './math';
import count from './js/count';
import sum from './js/sum';
// Import resources, Webpack will package them
import './css/index.css';
import './less/index.less';
import './sass/index.sass';
import './sass/index.scss';
import './styl/index.styl';

console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));

public/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webpack5</title>
    <!-- Import the packaged js file to see the effect -->
    <script src="../dist/main.js"></script>
  </head>
  <body>
    <h1>Hello Webpack5</h1>
    <!-- Prepare a DOM container with style -->
    <div class="box1"></div>
    <!-- Prepare a second DOM container with style -->
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <!-- Prepare the fifth DOM container using styles -->
    <div class="box5"></div>
  </body>
</html>

Run command

npx webpack

Open the index.html page to view the effect

Effect image

Process CSS resources​

Process Less resources​

Process Sass and Scss resources​

Process Stylus resources​

Process CSS resources

Process Less resources

Process Sass and Scss resources

Process Stylus resources