예쁜 SCSS webpack-3

Question

내 scss가 더 예쁘게 달리고 있지만 항상 오류가 발생하려고합니다. (prettier-webpack-plugin도 시도)을 사용하고 있습니다. 실행하면 .scss 파일을 자바 스크립트로 처리하려고합니다. 내 JS 파일 중 하나는 다음과 같습니다

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

angular 
    .module("app") 
    ... 

헤더 파일은 다음과 같습니다 : 나는 그것을 실행하면

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

내가 얻을 :

header{ 
    ... 
} 

내가 웹팩에 대해 다음 로더가 다음 오류 :

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-loader는 파일 경로를 더 예쁜 것으로 전달하지 않으므로 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 
    } 
}