在前端开发中，我们经常使用 Babel 进行代码转换，以便让我们在浏览器中运行 ES6+ 的代码。但是，Babel 在转换过程中也会将 CSS、LESS 或 SCSS 等样式文件进行编译。这样做的好处是可以在代码中使用 CSS Modules 等特性，但是也会导致样式文件在浏览器中运行时无法直接使用。
那么有没有方法可以在使用 Babel 转换代码时，不对样式文件进行编译呢？本文将为大家探究一些方法，以实现这一目的。
方法一：配置 babel-plugin-react-css-modules
如果我们在开发中使用了 CSS Modules，那么使用 babel-plugin-react-css-modules 插件可以很好地解决这个问题。
首先安装依赖包：
npm install babel-plugin-react-css-modules --save-dev
然后在 Babel 配置文件中添加以下内容：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- ---------------
---------------------------- ----
-
-
-
-这样配置之后，Babel 在编译代码时就会跳过 node_modules 目录中的样式文件，从而实现不将样式文件编译的目的。
方法二：使用 PostCSS
另一种方法是使用 PostCSS。PostCSS 是一种预处理器，可以将样式文件转换成浏览器可识别的 CSS 代码。它提供了一系列的插件，让我们可以对 CSS 代码进行编译、添加浏览器前缀等操作。
具体操作如下：
首先安装依赖包：
npm install postcss-loader postcss-preset-env --save-dev
然后在 webpack 配置文件中添加以下内容：
-- -------------------- ---- -------
-
------- -
------ -
-
----- ---------
---- -
- ------- -------------- --
-
------- -------------
-------- -
-------------- -
-
--
- ------- ---------------- -
-
-
-
--
-------- -
-------------------------------
-
-这样配置之后，样式文件就会通过 postcss-loader 进行编译，而不是 Babel。
方法三：手动配置 Babel
如果以上两种方法都无法满足我们的需求，那么我们也可以手动配置 Babel。我们可以禁用 Babel 的样式编译功能，从而实现不将样式文件编译的目的。
具体操作如下：
首先安装依赖包：
npm install babel-loader css-loader style-loader --save-dev
然后在 webpack 配置文件中添加以下内容：
-- -------------------- ---- -------
-
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- --------------------- -----------------------
-------- -
------------------------------------- - ------- ---- ---
------------------------------------------- - ------ ---- ---
------------------------------------
----------------------------------------
-
-
-
--
-
----- ---------
---- -
- ------- -------------- --
-
------- -------------
-------- -
-------------- --
-------- -
-- -- ----- -------
------------ ------
-
-
-
-
-
-
-
-通过以上配置，我们禁用了 Babel 的样式编译功能，将样式处理交给了 css-loader，从而实现不将样式文件编译的目的。
总结
本文探究了三种防止 Babel 编译 CSS 的方法：配置 babel-plugin-react-css-modules、使用 PostCSS 和手动配置 Babel。当然，在实际开发中，你可以根据自己的需求选择适合自己的方法。
通过本文的学习，我们不仅了解了如何防止 Babel 编译 CSS，更重要的是提高了自己的技术水平，为后续开发工作提供了指导意义。
示例代码可在 GitHub 上下载。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/665207c1d3423812e465c494