1. How to deal with SCSS

Sas-loader > CSS-loader > style-loader (added to HTML as a

or

Sass-loader > file-loader > style-loader/url (add to HTML as tag)

Sass -loader: Processes SASS/SCSS files and compiles them to CSS

Css-loader: Handles CSS and converts CSS code into a JS module

Style-loader: This implementation inserts loaded CSS code into HTML as style tags

File-loader: This is where CSS is extracted as a file

2. Install dependencies

Note: Sass-loader depends on Node-sass

npm install -D sass-loader node-sass
npm install -D css-loader style-loader file-loader
Copy the code

3. Directory structure

// '--' represents directory, '-' represents file
  --demo12
    --src
      -app.js
      -style1.scss
      -style2.scss
    -index.html
    -webpack.config.js
Copy the code

src/app.js

// import "./style1. SCSS "; // import "./style2.scss"; Window.addeventlistener ("click", function () { Const style1 = import("./style1.scss"); const style2 = import("./style2.scss"); });Copy the code

src/style1.scss

$bgColor: red;
body {
  background-color: $bgColor;
}
Copy the code

src/style2.scss

$color: black;
body {
  color: $color;
}
Copy the code

4. Write a WebPack configuration file

webpack.config.js

const path = require("path"); module.exports = { entry: { app: "./src/app.js" }, output: { publicPath: Resolve (__dirname, "dist"), // The packaged output directory filename: "[name].bundle.js"}, module: {rules: [{test: /\.scss$/, // Use: [{loader: "Style-loader ", // generate JS string as style node options: {singleton: }}, "csS-loader ", // convert CSS to CommonJS module "sass-loader" // compile Sass/Scss to CSS]}], / / rules: [/ / {/ / test: / \. SCSS $/, / / / / in the form of the < link > tag CSS/reference/use: [/ / "style - loader/url, / / {/ / loader: "file-loader", // options: { // name: '[name].[hash].css' // } // }, // "sass-loader" // ] // } // ] } };Copy the code

5. Run the package command

(You have global Webpack and webPack-CLI installed by default)

webpack
Copy the code

Once packaged successfully, the results are output to the dist directory

6. View the packing result

Create the index.html file and reference the main file generated by the package (in this case, app.bundle.js),

  <script src="./dist/app.bundle.js"></script>
Copy the code

When I open it in the browser,

in