Question

显然Sass已包含在新的create react应用程序（2.0.0及更高版本）中。但是作为一个网络新手，我不太明白为什么当我尝试应用样式时它们不会显示出来。我正在使用诸如create-react-app my-app --scripts-version = react-scripts-ts之类的react-scripts-ts）。谢谢！

Answer 1

更新：使用

创建您的应用

create-react-app your-app-name

不需要脚本版本。然后安装node-sass

yarn add node-sass

，然后使用

将sass文件直接导入您的组件中

import './my-component-styles.scss'

我认为webpack是现在正在编译sass文件的人，因此您可以像使用css文件一样使用它们

Answer 2

首先，您应该安装node-sass-chokidar

npm install node-sass-chokidar --save-dev

，还有npm-run-all这样：

npm install npm-run-all -g

然后在package.json中更改它们：

 "start": "react-scripts start",
 "build": "react-scripts build",

至：

 "start-js": "react-scripts start",
 "start": "npm-run-all -p watch-css start-js",
 "build": "npm run build-css && react-scripts build",
 "build-css": "node-sass-chokidar src/ -o src/",
 "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",

现在，如果您在组件内部创建mycomponent.sass，只需将其导入即可：

import './mycomponent.css'

如何在新的create react应用程序中使用sass？

2 个答案: