Know the SCSS

SCSS is a CSS preprocessor with a syntax similar to CSS, but with variables, logic, and other programming elements

$blue: #1875e7;div {
  color: $blue;
}
Copy the code

SCSS is also called SASS. The difference is that SASS syntax is similar to Ruby, while SCSS syntax is similar to CSS. Front-end engineers familiar with CSS will prefer SCSS

npm i -g node-sass
Copy the code

Then run the compile command:

Compile the main. SCSS source file into main.css
node-sass main.scss main.css
Copy the code

You can see the compiled main.css file in the same directory as the source code.

Access Webpack

module.exports = {
  module: {
    rules: [{// Add support for SCSS files
        test: /\.scss$/.// SCSS files are processed in the sequence of sass-loader, CSs-loader, and style-loader
        use: ['style-loader'.'css-loader'.'sass-loader'],},]},};Copy the code
  1. The SCSS source code is converted into CSS code through sass-Loader, and then the CSS code is handed over to CSS-Loader for processing.
  2. Css-loader will find the CSS code@import 和 url()Import statements like this tell Webpack to rely on these resources. It also supports CSS Modules, compression CSS and other functions. After processing the result, pass it to style-loader for processing.
  3. Style-loader converts CSS code to strings and then injects them into JavaScript code to style the DOM. If you want to extract CSS code into a separate file instead of mixing it with JavaScript, you can use the ExtractTextPlugin described in 1-5 Using Plugin.

Since sass-Loader is connected, the project needs to install these new dependencies:

Install the Webpack Loader dependency
npm i -D  sass-loader css-loader style-loader
# sass-loader relies on Node-sass
npm i -D node-sass
Copy the code