如何在 Webpack 项目中使用 SCSS？

🎯 引言

学会这篇文章后，你可以在自己的 Webpack 项目中轻松集成 SCSS，让样式管理更规范、更强大。你不仅知道怎么安装和配置对应的 Loader，还能掌握合理的项目目录结构，写出模块化、可维护的样式代码。这对提升你在实际开发中的效率和代码质量非常有帮助。

🎨 安装 sass-loader 和配置 style loader

我们先说配置 SCSS 的核心——sass-loader。它能让 Webpack 识别并编译 .scss 文件。除了它，还需要 css-loader 和 style-loader 协同工作：

• sass-loader：将 SCSS 转换成 CSS。
• css-loader：解析 CSS 文件。
• style-loader：把处理好的 CSS 通过 <style> 标签插入页面。

安装依赖

打开命令行，进入项目根目录，执行：

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

这里注意，sass-loader 依赖于 sass ，这就是实际执行编译的工具。

配置 Webpack

下面是一个基本的配置示例，放进你的 webpack.config.js 中：

module.exports = {
    // 省略其他配置
    module: {
        rules: [
            {
                test: /\.scss$/, // 匹配所有 .scss 文件
                use: [
                    'style-loader', // 将 CSS 注入到 DOM
                    'css-loader', // 解析 CSS
                    'sass-loader', // 编译 SCSS 到 CSS
                ],
            },
        ],
    },
};

📂 如何引入 .scss 文件

在配置好 Loader 之后，在项目里引入 SCSS 文件就跟引入 JS 模块一样简单。

假设有一个 styles 文件夹，里面有个 main.scss。

你可以在 JavaScript 入口文件，比如 index.js 中这样写：

import './styles/main.scss';

Webpack 会识别这个导入，自动帮你处理 SCSS 文件，最终样式生效在页面上。

举例说明

假设 main.scss 内容如下：

$primary-color: #42b983;

body {
    background-color: $primary-color;
    font-family: Arial, sans-serif;
}

引入之后，页面背景就会变成绿色。

🧾 小节总结

• 配置 sass-loader、css-loader 和 style-loader 是在 Webpack 中使用 SCSS 的关键。
• 通过 import './styles/main.scss' 可以在 JS 文件中引入 SCSS，实现样式生效。

❓ 知识问答（Q&A）

Q：为什么需要 sass-loader、css-loader 和 style-loader 三个 loader 一起使用？

A：sass-loader 负责将 SCSS 编译成 CSS，css-loader 解析 CSS 文件，处理依赖和路径，style-loader 将 CSS 通过 <style> 标签注入页面。三者组合，才能实现 SCSS 到页面样式的完整流程。

🧪 小练习

练习 1：修改 webpack.config.js，尝试添加对 .css 文件的支持，用相同的 loader 处理。

module.exports = {
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader'],
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
        ],
    },
};

练习2：创建一个新的 SCSS 文件 main.scss，导入到 main.js 并使用它。

$primary-color: #42b983;

body {
    background-color: $primary-color;
    font-family: Arial, sans-serif;
}

import './styles/main.scss';

🎉 恭喜你已经掌握了如何在 Webpack 中安装配置 SCSS，怎么引入 SCSS 文件，以及如何搭建规范的样式目录结构等技能啦！这些技巧是日常前端项目中非常实用的基础，后续你可以在此基础上更深入学习 Sass 和样式优化。祝你编码愉快！