create-react-app 添加 Sass 样式表

🌙
手机阅读
本文目录结构
axihe

添加 Sass 样式表

注意:此功能适用于 react-scripts@2.0.0 及更高版本。

通常,我们建议你不要在不同的组件中重用相同的 CSS 类。

例如,我们建议不要在 <AcceptButton><RejectButton> 组件中使用同一个 .Button CSS 类,而是使用自己的 .Button 样式创建一个 <Button> 组件,<AcceptButton>都可以渲染(但 不是继承)。

遵循这个规则通常会使 CSS 预处理器变得不那么有用,因为 mixins 和嵌套等功能会被组件组合所取代。 但是,如果你觉得 CSS 预处理程序有价值,你可以集成它。

要使用Sass,首先安装 node-sass

$ npm install node-sass --save
$ # or
$ yarn add node-sass

现在你可以将 src/App.css 重命名为 src/App.scss 并更新 src/App.js 以导入 src/App.scss

此文件和任何其他文件将会自动编译,如果使用扩展名 .scss.sass 导入的话。

要在 Sass 文件之间共享变量,可以使用 Sass 导入。

例如,src/App.scss 和其他组件样式文件可能包含 @import "./shared.scss"; 中定义的变量。

允许你像这样导入

@import 'styles/_colors.scss'; // 假设 styles 目录 在 src/ 目录下
@import '~nprogress/nprogress'; // 从 nprogress node模块导入 一个 css 文件

注意: 你必须在 node_modules 之前添加 ~ 前缀,如上所示。

node-sass 还支持 SASS_PATH 变量。

要使用你指定的相对路径导入,并且在不添加 ~ 前缀的情况下从 node_modules 使用导入,可以在项目根目录中使用变量 SASS_PATH=node_modules:src 添加 .env 文件。

要指定更多目录,可以将它们添加到 SASS_PATH ,用 : 分隔,例如 path1:path2:path3

如果你设置 SASS_PATH=node_modules:src ,这将允许像这样导入

@import 'styles/colors'; //假设 src/ 下的 styles 目录中存在 _colors.scss 文件。 
@import 'nprogress/nprogress'; // // 从 nprogress node模块导入 一个 css 文件

提示: 你也可以选择将此功能与 CSS modules 配合使用!

注意: 如果你正在使用Flow,请覆盖 .flowconfig 中的 module.file_ext 设置,以便它识别 .sass.scss 文件。

你还需要包含 .js.jsx.mjs.json文件的 module.file_ext 默认设置。

[options]
module.file_ext=.js
module.file_ext=.jsx
module.file_ext=.mjs
module.file_ext=.json
module.file_ext=.sass
module.file_ext=.scss

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

Bilibili(B站)

朱安邦

Anbang