创建 React 应用程序：添加 scss答案

【问题标题】：Creat React App: Adding scss创建 React 应用程序：添加 scss
【发布时间】：2018-06-12 10:20:35
【问题描述】：

寻找一点解释。

我在我的 create-react-app 中添加了 .scss 支持，并且一切正常（如在文档中：https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc）。

这些行带有加号：

"scripts": {
+    "build-css": "node-sass-chokidar src/ -o src/",
+    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",

我的第一个问题是第一个 src/ 和第二个 src/ 代表什么？在这种方法中，它会在 .scss 旁边创建 .css 文件。我的第二个问题是如何制作一个 .css，不管我有多少个 .scss 文件。

【问题讨论】：

标签： javascript css reactjs

【解决方案1】：

第一个和第二个/src 是输入和输出的路径，类似于文件的源和目标，您只想读取/src 文件夹中的.scss 文件，结果构建在同一个文件夹中/src 文件夹。
您可以在 SCSS 文件前添加下划线 (_)，这将告诉 SASS 这些文件在编译时不会有文件输出，因此如果您有一个名为 navBar.scss 的文件，您应该将其更改为 @987654325 @。确保从其他没有下划线的 .scss 文件中导入这些文件，否则编译器任务将不会对这些文件执行任何操作。

要导入文件，您不必指定下划线，但您必须输入文件的确切路径，例如导入您的 _navbar.scss：

@import 'route/to/components/navbar/navbar'

【讨论】：

【解决方案2】：

第一个 src/ 是它从中读取文件的位置，然后 -o 指定输出，第二个 src/ 是输出目录，这就是它在与源文件相同的位置创建新文件的原因。

对于单个文件输出尝试node-sass-chokidar src/ -o src/outputfile.css

【讨论】：