Prettier SCSS webpack-3

Question

I'm trying to have my scss run through prettier but always get errors. I'm using the prettier-webpack-loader (also tried with prettier-webpack-plugin). When I run it, it seems to want to process the .scss files as javascript. One of my js files looks like this:

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

angular
    .module("app")
    ...

Header file looks like this:

header{
    ...
}

I have the following loader for 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
    }
}
...

When I run it I get the following error:

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)

If I run prettier through the CLI it works fine.

Answer 1

It looks like prettier-webpack-loader does not pass the file path to Prettier, so there's no way for it to know it should parse as a SCSS file.

I think if you separate the loaders and add the parser to the options it might work:

{
  "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
  }
}