Question

我具有以下文件夹结构：

theme
    scss
       hero.scss
       header.scss
    style.css

我正在尝试将scss中的所有内容编译为style.css。我遵循了this tutorial，但是我相信这种方法将编译几个不同的css文件（而我只想要一个）。

即使采用上述方法，每当我运行npm run scss时，它都不会编译任何东西吗？

这是我的package.json文件：

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "scss": "node-sass --watch scss -o css"
  },
  "author": "",
  "license": "ISC"
}

运行npm run watch-css或npm run scss时，什么都没发生？我要去哪里错了？

Answer 1

对于node-sass命令，您的输入目录和输出目录不正确。假设您具有以下目录结构：

theme
    scss
      hero.scss
      header.scss
    style.css
package.json

您已经创建了一个名为scss的npm运行脚本，该脚本正在利用node-sass库将SASS编译为CSS。如果要执行此运行脚本，则应在命令行中键入以下内容：npm run scss

现在，当您键入此命令时，实际上是使用以下参数运行node-sass库：

node-sass --watch scss -o css

在此命令中，您指定了Sass文件位于scss目录中，并且node-sass应该在此目录中查找才能将Sass编译为CSS。完成此操作后，新生成的CSS将移至css目录中。

但是，第一个问题是您没有用于node-sass的css目录来将这些编译后的Sass文件放入其中。 您可以通过在css目录中创建theme文件夹或适当地修改输出位置参数来补救此问题。

另一个问题是您的Sass文件的输入目录位置不正确。您已将其指定为scss目录，但是此位置是相对于package.json文件的，并且在上述文件之间有theme文件夹。可能会更改为以下内容：theme/scss。

因此，为了使此命令正常工作，您需要更改输入和输出目录，以指向应用程序的正确目录结构。

也许您可以尝试将运行脚本更改为以下内容，看看是否有帮助（假设您不想创建css文件夹）：

"scss": "node-sass --watch theme/scss -o theme"

然后像这样重新运行您的npm脚本：

npm run scss

希望有帮助！

通过终端将scss文件夹中的所有内容编译为style.css

1 个答案: