Question

我正试图让我的scss跑得更漂亮，但总是会出错。我正在使用prettier-webpack-loader（也尝试使用prettier-webpack-plugin）。当我运行它时，它似乎想要将.scss文件作为javascript处理。我的一个js文件看起来像这样：

require("./header.component.scss");

angular
    .module("app")
    ...

头文件如下所示：

header{
    ...
}

我为webpack提供了以下加载程序：

...{
    "test": /\.scss$/,
    "use": ExtractTextPlugin.extract({
        "use": ["css-loader", "sass-loader"]
    })
}, {
    "test": /\.(js|scss)$/,
    "include": path.resolve(__dirname, "website/src"),
    "loader": "prettier-webpack-loader",
    "options": {
        "useTabs": true
    }
}
...

当我运行它时，我收到以下错误：

ERROR in ./website/src/components/header.component.scss
Module build failed: ModuleBuildError: Module build failed: SyntaxError: Unexpected token, expected ; (1:7)
> 1 | header{
    |       ^
  2 |   nav.bg-primary{
  3 |           padding:0.7rem 1rem;
  4 |           z-index: 10000;
    at createError$1 (C:\Development\BPI.InContext\src\Bpi.InContext\node_modules\prettier\parser-babylon.js:1:112)
    at parse (C:\Development\BPI.InContext\src\Bpi.InContext\node_modules\prettier\parser-babylon.js:1:783)
    at Object.parse (C:\Development\BPI.InContext\src\Bpi.InContext\node_modules\prettier\index.js:3785:12)
    at formatWithCursor (C:\Development\BPI.InContext\src\Bpi.InContext\node_modules\prettier\index.js:21730:22)
    at format (C:\Development\BPI.InContext\src\Bpi.InContext\node_modules\prettier\index.js:21770:10)
    at Object.format (C:\Development\BPI.InContext\src\Bpi.InContext\node_modules\prettier\index.js:21995:12)
    at Object.module.exports (C:\Development\BPI.InContext\src\Bpi.InContext\node_modules\prettier-webpack-loader\index.js:11:35)
    at runLoaders (C:\Development\BPI.InContext\src\Bpi.InContext\node_modules\webpack\lib\NormalModule.js:195:19)
    at C:\Development\BPI.InContext\src\Bpi.InContext\node_modules\loader-runner\lib\LoaderRunner.js:364:11
    at C:\Development\BPI.InContext\src\Bpi.InContext\node_modules\loader-runner\lib\LoaderRunner.js:230:18
    at runSyncOrAsync (C:\Development\BPI.InContext\src\Bpi.InContext\node_modules\loader-runner\lib\LoaderRunner.js:143:3)
    at iterateNormalLoaders (C:\Development\BPI.InContext\src\Bpi.InContext\node_modules\loader-runner\lib\LoaderRunner.js:229:2)
    at C:\Development\BPI.InContext\src\Bpi.InContext\node_modules\loader-runner\lib\LoaderRunner.js:202:4
    at C:\Development\BPI.InContext\src\Bpi.InContext\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:70:14
    at _combinedTickCallback (internal/process/next_tick.js:73:7)
    at process._tickCallback (internal/process/next_tick.js:104:9)

如果我通过CLI运行更漂亮，它可以正常工作。

Answer 1

看起来prettier-webpack-loader没有将文件路径传递给Prettier，因此它无法知道它应该解析为SCSS文件。

我认为如果你将加载器分开并将解析器添加到可能有效的选项中：

{
  "test": /\.js$/,
  "include": path.resolve(__dirname, "website/src"),
  "loader": "prettier-webpack-loader",
  "options": {
      "useTabs": true
  }
},
{
  "test": /\.scss$/,
  "include": path.resolve(__dirname, "website/src"),
  "loader": "prettier-webpack-loader",
  "options": {
      "parser": "postcss",
      "useTabs": true
  }
}

更漂亮的SCSS webpack-3

1 个答案: