css - 任何 scss 文件更改时出现 node-sass 错误

Question

我在使用 Node sass (以及任何其他 sass 软件)时遇到了很大的困难，这只是给我错误而不是输出。重点是:每次我在 scss 文件上运行 --watch 时，它都会返回一个我找不到答案的错误。坦率地说，我不知道发生了什么，因为 scss 文件就像下面的两行代码一样简单。 CSS

body
    margin: 0

package.json 中的脚本部分如下所示:

"scripts": {
    "watch": "npm-run-all watch:* ",
    "watch:sass": "node-sass --output-style expanded --source-map true -o css sass --watch",
    "watch:autoprefixer": "onchange -d 100 css/style.css -- autoprefixer-cli -o css/style.prefixed.css css/style.css",
    "watch:browsersync": "browser-sync start --server --files css/*.css *.html",
    "build": "npm run build:clean && npm run build:sass && npm run build:autoprefixer && npm run test",
    "build:clean": "rimraf css/*.css",
    "build:sass": "node-sass --output-style compact -o css sass",
    "build:sass:dev": "node-sass --output-style expanded --source-map true -o css sass",
    "build:autoprefixer": "autoprefixer-cli css/style.css",
    "test": "npm-run-all test:*",
    "test:html": "globstar nu-html-checker *.html",
    "init-project": "npm-run-all init:*",
    "init:dirs": "mkdirp sass css vendor images js",
    "init:files": "touch README.md index.html sass/style.scss js/script.js",
    "init:gitignore": "curl https://raw.githubusercontent.com/github/gitignore/master/Node.gitignore -o .gitignore",
    "init:npm-install": "npm install"
  },

依赖关系:

"dependencies": {
    "autoprefixer": "^7.2.5",
    "autoprefixer-cli": "^1.0.0",
    "glob-run": "^0.1.6",
    "globstar": "^1.0.0",
    "node-sass": "^4.7.2",
    "npm-run-all": "^4.1.2",
    "nu-html-checker": "^0.1.0",
    "onchange": "^3.3.0",
    "parallelshell": "^3.0.2",
    "rimraf": "^2.6.2",
    "sass": "^1.0.0-beta.4",
    "sass-watch": "^0.1.0"
  }

来自node-sass的错误消息(我认为最短的可能命令):

$ npm run watch:sass

> 7.7@1.0.0 watch:sass E:\Kodilla\w07\Zadania\7.7
> node-sass -w sass/ -o css/output.css

=> changed: E:\Kodilla\w07\Zadania\7.7\sass\style.scss
=> changed: E:\Kodilla\w07\Zadania\7.7\sass\style.scss
{
  "status": 1,
  "file": "E:/Kodilla/w07/Zadania/7.7/sass/style.scss",
  "line": 1,
  "column": 1,
  "message": "Invalid CSS after \"h\": expected 1 selector or at-rule, was \"head\"",
  "formatted": "Error: Invalid CSS after \"h\": expected 1 selector or at-rule, was \"head\"\n        on line 1 of sass/style.scss\n>> head\n   ^\n"
}

$ npm run watch:sass

> 7.7@1.0.0 watch:sass E:\Kodilla\W07\Zadania\7.7
> node-sass --output-style expanded --source-map true -o css sass --watch

=> changed: E:\Kodilla\W07\Zadania\7.7\sass\style.scss
{
  "status": 1,
  "file": "E:/Kodilla/W07/Zadania/7.7/sass/style.scss",
  "line": 1,
  "column": 1,
  "message": "Invalid CSS after \"h\": expected 1 selector or at-rule, was \"head\"",
  "formatted": "Error: Invalid CSS after \"h\": expected 1 selector or at-rule, was \"head\"\n        on line 1 of sass/style.scss\n>> head\n   ^\n"
}

已安装的软件包(全部本地安装):

 npm list --depth=0
7.7@1.0.0 E:\Kodilla\W07\Zadania\7.7
+-- autoprefixer@7.2.5
+-- autoprefixer-cli@1.0.0
+-- glob-run@0.1.6
+-- globstar@1.0.0
+-- node-sass@4.7.2
+-- npm-run-all@4.1.2
+-- nu-html-checker@0.1.0
+-- onchange@3.3.0
+-- parallelshell@3.0.2
+-- rimraf@2.6.2
+-- sass@1.0.0-beta.4
`-- sass-watch@0.1.0

$ npm list -g --depth=0
C:\Users\Radosław Podgórski\AppData\Roaming\npm
`-- (empty)

最重要的是:当我运行 npm run watch 时，有 3 个内容相同的错误 block (从状态到格式化)，并且在按 Ctrl+C 后 git bash session 卡住 - 根本没有响应!监视已终止，但 session 将在下一步被终止。

也许问题更严重，因为我尝试使用 Koala v2.3.0，但它也不适用于 scss 文件(？)错误消息是(相同的 2-liner 或任何其他):

ArgumentError: invalid byte sequence in UTF-8Use --trace for backtrace

这个问题与所有 scss 文件有关(不仅仅是 1)，我还尝试了整个元素和其他元素的不同位置。考 pull 从来没有在我的电脑上工作过。也许这两个问题完全无关。但是，也许有 1 个根本原因会影响我的电脑上与 scss/css 相关的所有可能的软件。

PC configuration:

• OS Name: MS Windows 10 Pro
• Version: 10.0.16299 Git
• bash: git version 2.15.1.windows.2
• node --version: v9.2.0

非常感谢任何帮助。谢谢!

Answer 1

编译.scss/.sass

文件扩展名必须与所使用的语法相对应。 Sass 编译器将根据扩展名解释文件的内容。

您正在使用带有 .scss 文件扩展名的缩进 Sass 语法；将文件扩展名更改为 .sass 以允许编译器正确解释您的文件。

<小时/>

通过 SASS 语法使用 .sass 文件扩展名:

body
    margin: 0

<小时/>

使用 .scss 文件扩展名和 SCSS 语法:

body {
    margin: 0;
}

<小时/>

文件路径中的考 pull 和变音符号

Koala 无法处理变音符号。