更漂亮的 SCSS webpack-3

Question

我试图让我的 scss 运行通过 prettier，但总是出错。我正在使用 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 (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

Prettier SCSS webpack-3

angularjs

webpack

sass

webpack-3

prettier