Create React App 添加 Sass 样式表

Sass(Syntactically Awesome Stylesheets)是一种用于编写更简洁、更易维护的 CSS 的预处理器。Create React App 默认支持 Sass,让你可以轻松地在项目中使用 Sass 来管理样式。

安装 Sass

首先,你需要安装 node-sass 和 sass-loader 两个依赖包。在项目根目录下运行以下命令:

--- ------- --------- -----------

配置 webpack

接着,你需要配置 webpack 来支持 Sass。在项目根目录下找到 webpack 配置文件(通常是 webpack.config.js 或 webpack.config.dev.js),在 module.rules 数组中添加以下配置:

-
  ----- --------------
  ---- ---------------- ------------- ---------------
-

这段配置告诉 webpack 当遇到以 .scss 或 .sass 结尾的文件时,使用 style-loader、css-loader 和 sass-loader 来处理文件。

创建 Sass 文件

现在你可以在项目中创建 .scss 或 .sass 文件来编写样式。例如,你可以创建一个 styles.scss 文件:

--------------- --------

------- -
  ----------------- ---------------
  ------ ------
  -------- ---- -----
  ------- -----
  -------------- ----
-

引入 Sass 文件

最后,在你的组件中引入 Sass 文件。例如,在一个 Button 组件中:

------ ----- ---- --------
------ ----------------

----- ------ - -- -- -
  ------ -
    ------- ------------------------ -----------
  --
-

------ ------- -------

现在你已经成功地在 Create React App 项目中添加了 Sass 支持。开始使用 Sass 来管理你的样式吧!


上一篇:添加 CSS Modules
下一篇:PostCSS(后处理 CSS)