javascript - 创建 React 应用程序 : Adding scss

Question

寻找一些解释。

我在我的 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 文件。

Answer 1

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

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

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