前言
前端开发离不开CSS样式，而SASS和Webpack是前端开发中非常流行的技术。当二者结合使用时，有时会出现CSS样式不生效的问题。本文将介绍在SASS+Webpack 环境下CSS样式不生效解决方法，并提供示例代码。
问题分析
在使用SASS和Webpack时，使用import引入SASS文件可以正常编译生成CSS文件，但有时在页面上却发现CSS样式不生效。
这是因为Webpack将所有的样式都打包成了一个CSS文件，而在该文件中，样式的顺序可能会发生改变，部分样式可能被后面的样式所覆盖。这种情况下即使在SASS文件中定义了样式，但在CSS文件中却没有生效。
解决方法
方法一：使用CSS Modules
CSS Modules 是一种将CSS文件作为模块导入的方案，可以保证每个模块中的CSS样式不会影响到其他模块。这种方法可以有效解决样式冲突的问题。
使用CSS Modules需要安装相应的loader，并在Webpack配置文件中进行配置。以下是一个简单的示例：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ----------------------
---- -
---------------
-
------- -------------
-------- -
-------- -----
--------------- -------------------------
-
--
-------------
-
-
-
-
--在SASS文件中使用composes指令引用其他class，例如：
-- -------------------- ---- ------- -- --------- -- ------ - -------- ----- --------------- ------- ---------------- ------- ------------ ------- - -- --------------- -- ---------- - --------- ----- ---- --------------- ----------------- -------- -------- ----- -
在JSX代码中使用className指定CSS类名，例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- --------------------
-------- ----- -
------ -
---- -----------------------------
--------- ----------
------
--
-
------ ------- ----使用CSS Modules需要注意以下内容：
- CSS文件的命名需要使用
.module.scss的格式； - 在JSX代码中使用类名时需要通过
import styles from './app.module.scss'语句导入； - 在SASS文件中使用
composes指令时需要使用相对路径。
方法二：使用postcss-uncss-plugin
postcss-uncss-plugin 是一个 PostCSS 插件，可以去掉无用的 CSS 样式，以便减少 CSS 文件的大小。
可以在Webpack配置文件中使用该插件，例如：
-- -------------------- ---- -------
----- ------------ - --------------------------------
-------------- - -
------- -
------ -
-
----- -----------
---- -
---------------
-------------
-
------- -----------------
-------- -
--------------- -
-------- -
--------------
----- --------------
--
-
-
-
--
-------------
-
-
-
-
--上面的例子将 HTML 文件指定为 index.html，可以自行修改为你的 HTML 文件名。在构建时，Webpack 会使用 postcss-uncss-plugin 自动去除未使用的 CSS 样式。
方法三：修改Webpack配置文件
如前所述，Webpack会将所有样式打包到一个CSS文件中，从而引起样式冲突的问题。为了解决这个问题，我们可以将Webpack配置文件进行修改，将每个组件的样式分别打包成不同的CSS文件。
修改Webpack配置文件的过程比较复杂，这里不再赘述。有兴趣的读者可以自行查阅相关资料。
结语
在SASS+Webpack 环境下CSS样式不生效时，可以使用CSS Modules、postcss-uncss-plugin 或修改Webpack配置文件来解决问题。需要注意的是，不同的解决方法适用于不同的场景，具体使用需要根据实际情况进行选择。
希望本文的介绍对你有所帮助，感谢阅读。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6781fc8d935627c900f27483