简介
cra-sass 是一个用于增强 Create React App（以下简称 CRA）的功能，以便于支持 SASS/SCSS 样式预处理器的 npm 包。通过 cra-sass，开发者可以使用 SASS/SCSS 编写更为灵活、可复用的样式，并在 CRA 项目中无缝使用。
本文将介绍如何使用 cra-sass 在 CRA 项目中使用 SASS/SCSS 样式预处理器，并提供相应的示例代码。
安装
使用 CRA 创建新项目，然后在项目目录下执行以下命令：
--- ------- -- --------
配置
在项目根目录下创建一个名为 .env 的文件，并添加以下内容：
--------------------------
该配置告诉 CRA，在编译 SASS/SCSS 文件时，需要将 node_modules 和 src 目录添加到搜索路径中。
在项目根目录下创建一个名为 src/setupProxy.js 的文件，并添加以下内容：
----- ---- - ---------------
-------------- - ------------- -
--------
---------------------------------------- -
------- ------------------------
------------ -
-------- ---
--
-------------------- -
-- ------------------------------ -
---------------------------- ------------------------
-
--
--
-
-如果您项目中没有使用代理，则只需创建一个空的 setupProxy.js 文件即可。但是，创建一个空文件并不是一个好习惯。因为在您项目增长并开始使用代理时，你不必再次编写此文件。
最后，在项目根目录下创建一个名为 src/App.scss 的文件，并添加以下示例代码：
--------------- --------
-------------------- ----
---- -
------------ -------------- ------------------- ------ ---- ------- ---------- ------ ------
----- ------ ----------- ------ ----- ------- ------ -- ------- ------ -- --------
----- ----- -------
-
--- --- --- --- --- -- -
------- --
-
---------- -
------- - -----
---------- ------
-------- -----
-- -
------ ---------------
-------------- -----
-
-- -
------ -----
-------------- ----
-
- -
------------ ----
-------------- -----
-
------ -
----------------- ---------------
------- -----
-------------- --------------------
------ -----
------- --------
---------- -----
-------- --- -----
----------- --- ---- -----
------- -
----------------- ---------------------- -----
-
-
-测试
现在，执行以下命令启动 CRA 项目并查看效果：
--- -----
在浏览器中打开 http://localhost:3000，您将看到 src/App.scss 文件中定义的样式已被应用到页面上。如果您看到了一个包含样式的页面，则您已经成功在 CRA 项目中使用 SASS/SCSS 样式预处理器。
总结
在本文中，我们介绍了如何使用 npm 包 cra-sass 为 CRA 项目添加 SASS/SCSS 样式预处理器的功能。通过使用 cra-sass，开发者可以更为灵活地编写样式，并遵循最佳实践。本文还提供了相应的示例代码，方便读者学习和参考。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005664081e8991b448e24e3