Prettier SCSS webpack-3

Question

私のscssをよりきれいに走らせようとしていますが、いつもエラーが出ます。私もprettier-webpack-loader（prettier-webpack-pluginで試してみました）を使用しています。私がそれを実行すると、.scssファイルをjavascriptとして処理したいようです。私のjsファイルの一つは次のようになります。私はそれを実行すると、私が得る

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

：私はWebPACKのために、次のローダーを持って

header{ 
    ... 
} 

：

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

angular 
    .module("app") 
    ... 

ヘッダ・ファイルは、次のようになります次のエラー：

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

prettyttier-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 
    } 
}