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

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

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

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

Answer 2

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

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

Creat React App：添加scss

2 个答案: