如何将 sass 与新的 create react 应用程序一起使用？

Question

显然 Sass 已包含在新的 create react 应用程序（2.0.0 起）中。但作为网络新手，我不太明白为什么当我尝试应用样式时，它们没有出现。我正在使用像 create-react-app my-app --scripts-version=react-scripts-ts 这样的 react-scripts-ts。谢谢！

Answer 1

首先你应该安装 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'

Answer 2

更新：使用

创建您的应用

create-react-app your-app-name

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

yarn add node-sass

然后使用

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

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

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

如何将 sass 与新的 create react 应用程序一起使用？

how can I use sass with the new create react app?

sass

reactjs

create-react-app