Stylelint問題
import檔名有的scss時,報錯"Unexpected leading underscore in imported partial name"
partial name意指為了不要讓SASS編譯,而在檔名開頭加上。這個報錯只要
讓SASS認為@import的是純css
就能解開,有4種方式- 副檔名改以.css
- 檔名以protocol開頭
@import "http://_variable.scss";
- - 檔名是url()
@import url("../index.css");
在結尾加上screen
@import "index.scss" screen;
Unexpected extension ".scss" in @import (scss/at-import-partial-extension)
意指@import的.scss檔不該有副檔名把附檔名去掉
修改.stylelintrc.js
// 設為一定要有副檔名 at-import-partial-extension:'always'
使用tailwind時,報錯"Unexpected unknown at-rule "@tailwind" scss/at-rule-no-unknown"
rules: { "at-rule-no-unknown": null, "scss/at-rule-no-unknown": [true, { ignoreAtRules: ["tailwind"] }], }
Unexpected unknown at-rule "@tailwind" scss/at-rule-no-unknown
使用map-get時,報錯"Unknown function 'map-get'"
圖中的方式是先使用@use "sass:map";引入SASS map module,然後使用map module下的get(),再透過function-no-unknown定義ignore function"rules": { "function-no-unknown":[true, {"ignoreFunctions":["map.get"]}], }
function-no-unknown
The Next-Generation Sass Module System: Draft 6
Prettier
HTML起始標籤結尾、結尾標籤結尾一直掉到下一行
bracketSameLine設為true
、htmlWhitespaceSensitivity設為ignore
ESLint(整合Prettier)
即便fix過了每次打開專案仍瘋狂報錯"Delete ␍ prettier/prettier"
如果電腦作業系統是Windows,直接改全域設定,然後重新pull專案git config --global core.autocrlf false
ESLint跟Prettier瘋狂起衝突
檢查有無安裝eslint-config-prettier。沒有的話先安裝,再設定.eslintrc.js。eslint-config-prettier會幫你關掉ESLint和Prettier起衝突的rule
// 記得放在extends的最後一個 extends: [ 'eslint-config-prettier', ],
其他
"can not resolve url."
專案的依賴,或依賴的依賴需要url。從webpack 5開始不會自動幫你安裝,自行安裝即可解決
"Uncaught ReferenceError: Buffer is not defined"
先確認有沒有安裝process、buffer,沒有的話自行安裝,然後到vue.config.js新增webpack設定
const webpack = require('webpack'); configureWebpack: { plugins: [ new webpack.ProvidePlugin({ process: 'process/browser', Buffer: ['buffer', 'Buffer'], }), ], },