Javascript 创建React应用程序：添加SCS

寻找一点解释

我在我的CreateReact应用程序中添加了.scss支持，一切正常（比如在文档中：）

有以下带加号的行：

"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文件。

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

对于单文件输出，请尝试

节点sass chokidar src/-o src/outputfile.css

第一个和第二个

/src

是输入和输出的路径，类似于文件的源和目标，您只想读取

/src

文件夹中的.scss文件，结果构建在相同的

/src

文件夹中

您可以在SCSS文件前加一个下划线（u），这将告诉SASS这些文件在编译时将没有文件输出，因此，如果您有一个名为

navBar.SCSS

的文件，您应该将其更改为

\u navBar.SCSS

。请确保您是从没有下划线的其他.scss文件导入这些文件，否则编译器任务将不会处理这些文件

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

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