Webpack 是一个强大的前端构建工具，它可以将多个资源打包成一个或多个文件，包括 JavaScript、CSS、图片、字体等等。在 Webpack 中使用 CSS 和 SASS 是非常常见的场景，本文将深入介绍如何配置 webpack，以及解决使用 CSS-loader 和 SASS-loader 时遇到的一些常见问题。
初步环境配置
在使用 webpack 开发时，我们一般都需要按照如下方式引入 CSS：
<head> <link rel="stylesheet" href="style.css"> </head>
而在 webpack 中，则需要使用 CSS-loader 和 style-loader。安装方式如下：
npm install css-loader style-loader --save-dev
然后在 webpack.config.js 文件中进行配置：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- ---------------- --------------
--
--
--
--以上配置的具体含义是：当 webpack 碰到 .css 后缀的文件时，首先使用 css-loader 进行加载，然后运用 style-loader 将样式导入到页面中。这样可以使得修改样式能够实时刷新。
使用 SASS
SASS 是一个 CSS 预处理器，可以让我们使用更加简洁的代码编写样式。在使用 SASS 时，只需要将 .css 文件改为 .sass 或 .scss 即可。 但是，此时需要先安装 sass-loader：
npm install sass-loader node-sass --save-dev
然后在 webpack.config.js 文件中进行如下配置：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ----------
---- ---------------- ------------- ---------------
--
--
--
--这样就可以愉快的开始使用 SASS 编写样式啦！
常见问题与解决方案
发生错误：ModuleBuildError: Module build failed: Error: Node Sass does not yet support your current environment on MacOS
这个错误是由于 node-sass 未能正确度量匹配当前环境而导致的。常见于 MacOS 系统，需要下载一些针对特定操作系统的依赖包进行修复。
官方的解决办法是执行如下命令：
npm uninstall node-sass npm install node-sass --sass-binary-name=<your platform>-x64-<you node version>._binding.node
例如，在 macOS Catalina 10.15.4 和 Node.js v14.1.0 上安装 node-sass 所需输入的命令为：
npm uninstall node-sass npm install node-sass --sass-binary-name=darwin-x64-83_binding.node
发生错误：Module not found: Error: Can't resolve 'sass-loader'
这个错误最可能是因为 sass-loader 未安装，或者安装出了问题。还可能是版本问题，当前使用的 webpack 版本不支持所选的 sass-loader 版本。
可以尝试检查一下安装的 sass-loader 版本是否正确，或者重新安装 sass-loader。
发生错误：Duplicate declaration
在 webpack 中，样式默认会被打包在一个文件中。如果在样式文件里面使用了相同的名称或者变量，那么就会出现“重复声明”的错误。
解决方法：避免使用相同的名称或者变量，或者将一些通用的规则独立放到一个文件中。
结语
本文简要介绍了 webpack 中使用 CSS-loader 和 SASS-loader 时的环境配置和 Bug 解决方案，并且提供了一些常见问题的解决方法。希望本文可以帮助读者更好地掌握前端开发技术。最后，附上完整的示例代码：
-- -------------------- ---- -------
-- -----------------
-------------- - -
------- -
------ -
-
----- ---------
---- ---------------- --------------
--
-
----- ----------
---- ---------------- ------------- ---------------
--
--
--
--来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6782fa85935627c900249d97
