我正试图让我的scss跑得更漂亮,但总是会出错。我正在使用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$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运行更漂亮,它可以正常工作。
答案 0 :(得分:2)
看起来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
}
}