webpack搭建scss环境

webpack搭建scss环境

• scss: 它是一种 CSS 预处理器，语法和 CSS 相似，但加入了变量、逻辑、等编程元素.

1.scss 运行环境

node-sass
scss 文件需要在node平台运行,node-sass sass 是 scss sass的运行平台

2.目录结构

3.安装依赖

• node-sass
• sass-loader 加载 Sass/SCSS 文件并将他们编译为 css
• css-loader 解析模块要的 css @import …
• mini-css-extract-plugin 将css语法提取单独的css 文件
• html-webpack-plugin 打包编译html
• sass sass 运行环境
• webpack webpack 运行环境
• webpack-cli 提供webpack的命令

4.创建webpack.config.js文件

module.exports = {
   
    mode: 'development',
    entry: './src/index.js',
    output: