更漂亮的SCSS webpack-3

Question

我想让我的scss运行得更漂亮，但总是会出错。我正在使用prettier-webpack-loader (也尝试使用prettier-webpack-plugin)。当我运行它时，它似乎希望以javascript的形式处理.scss文件。我的一个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

看起来更漂亮-webpack-加载器不会将文件路径传递给更漂亮的，所以它没有办法知道它应该解析为一个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
  }
}