在 Vue 项目中，我们通常使用 Webpack 对项目进行打包。但是，有时候会遇到一个问题：在打包后的应用中，某些 Vue 组件的样式不能正常展示。这个问题可能会让你头疼，特别是当你试图使用 CSS 预处理器或是 CSS 模块化的时候。在这篇文章中，我们将详细谈论此问题并提供一些解决方法。
问题描述
假设你有一个 Vue 组件，它有一个带有 css modules 的样式表，如下所示：
-- -------------------- ---- -------
----------
---- ------------------
--- ----------------------------
------
-----------
------ -------
---------- -
-------- -----
------------ -------
---------------- -------
-
------ -
----------- -------
---------- -----
------ -----
-
--------
--------
------ ------- -
----- --------------
------ -
------ ------
-
--
---------这个组件可以在开发环境中正常显示它的样式。但是当你使用 Webpack 进行打包并在生产环境中运行时，样式不再生效。
原因分析
在 Vue.js 中，样式可以通过 style 标签或是 style 属性来定义。同时，Vue.js 还提供了两种使用样式的方式：全局样式（global styles）和局部样式（scoped styles）。其中，局部样式就是通过使用 scoped 关键字，在样式中定义作用域。当使用 webpack 进行打包时，只会处理 style 标签中的样式，而不会处理 style 属性的样式。因此，当你在使用 Vue.js 中的样式时，需要注意这一点。
另外一个可能导致问题出现的原因是，在 webpack 打包时，如果你使用了 css-loader 和 vue-style-loader，那么组件中的样式将会被打包在一个独立的 css 文件中。默认情况下这个 css 文件会被在 HTML 中通过 link 标签引入。但是，这可能违反了你在组件中使用 CSS Modules 的需求。
解决方法
为了解决这个问题，我们可以通过以下方式之一来解决。
方法 1：使用 vue-loader 的 postcss-modules 插件
vue-loader 内置了一个 postcss-modules 插件，可以帮助你在 Vue 组件中使用 CSS Modules。你只需要在 vue.config.js 中添加以下配置：
-- -------------------- ---- -------
-------------- - -
------------- ------ -- -
----- ----- - --------------- ------ ----------------- ----------
------------------ --
--------------------------------------------------------
--
-------------
-------------
---------------------
------------------
------------ -- -
--------------- - -
--------------- ---------------
--
------ --------
---
-------------
-------------
-------------
------------------
------------ -- -
--------------- - -
--------------- ---------------
--
------ --------
---
-
--其中，addStyleResource 方法是用来指定你需要全局引入的 CSS 文件的。你可以在这个方法中传入你需要引入的各个文件的路径。
方法 2：手动导入样式表
另一个解决方法是手动导入样式表。你可以这样修改组件的代码：
-- -------------------- ---- -------
----------
---- ------------------
--- ----------------------------
------
-----------
------ -------
---------- -
-------- -----
------------ -------
---------------- -------
-
------ -
----------- -------
---------- -----
------ -----
-
--------
--------
------ ----- ---- ----------------------------
------ ------- -
----- --------------
------ -
------ ------
--
--------- -
-- -----
--------------
-
--
---------通过手动导入样式表，你可以确保你的样式能够正确地以局部变量的形式进行使用。
总结
在 Vue.js 项目中使用 Webpack 打包时，样式可能出现不生效的问题。这是因为 Webpack 只处理 style 标签中的样式，而不会处理 style 属性的样式。为了解决这个问题，我们可以使用 vue-loader 的 postcss-modules 插件或是手动导入组件的样式表。这两种方法都可以让你在打包后的 Vue.js 应用中使用正确的样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6461fd0b968c7c53b035270c