webpack学习（九）：配置sass

demo地址: https://github.com/Lkkkkkkg/webpack-demo
继上一次配置完react: 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 文件生效, 配置成功