webpack学习（九）：配置sass

我不是女神ヾ 2022-04-06 17:42 626阅读 0赞

**demo地址: [https://github.com/Lkkkkkkg/webpack-demo][https_github.com_Lkkkkkkg_webpack-demo]**  
继上一次配置完react: [https://blog.csdn.net/qq593249106/article/details/84928595][https_blog.csdn.net_qq593249106_article_details_84928595]

## 安装 ##

sass 是预编译语言, 浏览器无法直接识别, 需要进行编译成 css 文件, 所以编译 sass 需要安装 sass-loader , sass-loader 又依赖于 node-sass, 编译成 css 之后, 还需要用到 style-loader css-loader 来打包, 所以都需要安装

npm install node-sass sass-loader style-loader css-loader --save-dev

在 src 目录下新建一个 sass.scss 用来测试, 这里用的是 scss 的语法:

|- /node_modules
    |- /src //用于放源文件的文件夹
      |- /components
        |- /index //模板文件
          |- index.html //模板文件
          |- index.js //入口文件
          |- App.js //入口文件
          |- index.scss//入口文件
    |- package.json
    |- webpack.config.js //webpack配置文件

**index.scss**

$color: green; body { 
      background-color: $color;
    }

在 index.js 中引入 sass 文件:  
**index.js**

import React from 'react'
    import {  render } from 'react-dom'
    import App from './App'
    import './index.scss'
    
    render(<App />, document.getElementById("root"))

## 配置 webpack.config.js ##

安装了 loader 后, 在 webpack 配置文件中配置一下让它生效:  
**webpack.config.js**

const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const CleanWebpackPlugin = require('clean-webpack-plugin');
    
    
    module.exports = { 
        mode: 'development',
        entry: './src/components/index/index.js', //入口文件
        devtool: 'inline-source-map', // 不同选项适用于不同环境
        devServer: { 
            contentBase: './dist', //将dist目录下的文件(index.html)作为可访问文件, 如果不写这个参数则默认与webpack.cofig.js的同级目录
            port: 8080 //端口号设为8080, 默认也是8080
        },
        module: { 
            rules: [ //配置加载器, 用来处理源文件, 可以把es6, jsx等转换成js, sass, less等转换成css
                { 
                    exclude: /node_modules|packages/, //路径
                    test: /\.js$/, //配置要处理的文件格式，一般使用正则表达式匹配
                    use: 'babel-loader', //使用的加载器名称
                },
                { 
                    test: /\.scss/, //配置sass转css
                    use: [
                        { loader: 'style-loader'}, { loader: 'css-loader'}, { loader: 'sass-loader'}
                    ]
                }
            ]
        },
        plugins: [ //webpack 通过 plugins 实现各种功能, 比如 html-webpack-plugin 使用模版生成 html 文件
            new CleanWebpackPlugin(['dist']), //设置清除的目录
            new HtmlWebpackPlugin({ 
                filename: 'index.html', //设置生成的HTML文件的名称, 支持指定子目录，如：assets/admin.html
                template: "./src/components/index/index.html" //指定模板文件的位置
            })
        ],
        output: { 
            filename: 'bundle.js', //根据入口文件输出不同出口文件
            path: path.resolve(__dirname, 'dist')
        }
    };

## 运行服务器 ##

终端输入 npm run dev, 弹出网页, 背景为绿色, sass 文件生效, 配置成功  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70]

[https_github.com_Lkkkkkkg_webpack-demo]: https://github.com/Lkkkkkkg/webpack-demo
[https_blog.csdn.net_qq593249106_article_details_84928595]: https://blog.csdn.net/qq593249106/article/details/84928595
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70]: /images/20220406/5ae1e4e5cb634f2bb1357802beb4f89c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，626人围观）

还没有评论，来说两句吧...

相关阅读

相关 webpack4中sass的使用

1:安装 npm install sass-loader node-sass --save-dev 2:配置中加入 sass 重新编译就可以 {

r囧r小猫/ 2022年12月23日 14:25/ 0 赞/ 248 阅读

相关学习笔记——react如何全局配置sass

-------------------- > 在react中，在src文件夹下，新建assets文件夹，其内存放一些公共的scss文件。在组件需要使用scss文件时，需要在组

骑猪看日落/ 2022年11月20日 05:51/ 0 赞/ 676 阅读

相关 webpack学习（九）：配置sass

demo地址: [https://github.com/Lkkkkkkg/webpack-demo][https_github.com_Lkkkkkkg_webpack-dem

我不是女神ヾ/ 2022年04月06日 17:42/ 0 赞/ 627 阅读

相关 webpack学习（八）：配置react

demo地址: [https://github.com/Lkkkkkkg/webpack-demo][https_github.com_Lkkkkkkg_webpack-dem

淡淡的烟草味﹌/ 2022年04月06日 15:30/ 0 赞/ 277 阅读

相关 webpack学习（四）：配置CleanWebpackPlugin

demo地址: [https://github.com/Lkkkkkkg/webpack-demo][https_github.com_Lkkkkkkg_webpack-dem

迷南。/ 2022年04月06日 08:26/ 0 赞/ 627 阅读

相关 webpack学习（三）：配置HtmlWebpackPlugin

demo地址: [https://github.com/Lkkkkkkg/webpack-demo][https_github.com_Lkkkkkkg_webpack-dem

约定不等于承诺〃/ 2022年04月06日 08:05/ 0 赞/ 298 阅读

相关 webpack学习（一）：初步配置webpack

demo地址: [https://github.com/Lkkkkkkg/webpack-demo][https_github.com_Lkkkkkkg_webpack-dem

女爷i/ 2022年04月06日 05:27/ 0 赞/ 294 阅读

相关学习webpack（二）之 webpack配置

简述 > 当我们在终端中使用webapck命令时，默认首先查找是否存在webpack.config.js文件，如果存在，就使用这个文件中的配置；如果不存在，就使用终端上你

我不是女神ヾ/ 2022年04月03日 14:20/ 0 赞/ 358 阅读

相关如何学习配置webpack(一）

项目小白如何从0开始配置webpack 自己配置过webpack的人应该都知道，webpack真的好复杂，一开始做项目都是拿别人现成的做做小修改，但是别人的终究没有自己配

迷南。/ 2022年01月18日 23:37/ 0 赞/ 240 阅读

相关 vue Webpack 中sass配置文件

vue学习日记：在项目中引用sass vue-cli生成的项目引入sass方法: 安装注意事项 sass-loader 版本不能高于 7.3.1 npm i

谁践踏了优雅/ 2021年12月16日 09:25/ 0 赞/ 437 阅读