Webpack builds the SCSS environment

The directory structure

1 SCSS running environment

The Node-sass SCSS file needs to be run on the Node platform. Node-sass sass is the running platform of SCSS SASS

Initial project

npm init – king

2 Installation Dependencies

  • node-sass
  • The sass-Loader loads the Sass/SCSS files and compiles them to CS
  • CSS – Loader resolves the CSS required by the module.
  • The mini-css-extract-plugin extracts the CSS syntax from a separate CSS file
  • HTML – webpack – packaged HTML plugin
  • webpack
  • webpack-cli
  • sass

3 Create the webpack.config.js file

module.exports = {
    mode: 'development'.entry: './src/index.js'.output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'}},Copy the code

4: Configures the Loader and plug-in

const path = require('path');
const MineCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: 'development'.entry: './src/index.js'.output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },
    module: {
        rules: [{test: /\.s[ac]ss$/i,
                exclude: /(node_modules|bower_components)/,
                use: [
                    MineCssExtractPlugin.loader,
                    'css-loader'.'sass-loader']},]},plugins: [
        new MineCssExtractPlugin({
            filename: '[name].css'
        }),
        new HtmlWebpackPlugin({
            template: './index.html'.filename: 'index.html'.chunks: ['main']]}})Copy the code

5 run

Start packing

npx webpack

Run the packaged file on the browser