Prefácio:
- Comparado com usar menos com vue3, será um pouco mais problemático usar sass, mas basicamente é suficiente apenas adicionar algumas configurações.
- Pacotes que precisam ser instalados para usar menos com vue3
npm install less
npm install less-loader
- Após a instalação dos dois acima, você pode adicionar lang à tag de estilo no componente e usar menos. A referência específica é a seguinte
< style lang="less" scoped></ style>
- A seguir, vamos continuar a ver como vue3 usa sass, focando na segunda etapa: o código que precisa ser adicionado em vue.config.js e o pacote de instalação são todos iguais, mas você precisa prestar atenção na versão de instalação .
Passo 1: Instale versões relacionadas ao sass
Este é o número da versão usada. Ao instalar, escolhi npm como ferramenta de gerenciamento de pacotes. Você pode optar por baixá-lo. Em alguns projetos, um erro pode ser relatado após a instalação. Depois de pesquisar no Baidu, é basicamente um problema de versão. Você precisa fazer isso durante a instalação. Preste atenção à versão de instalação. Você pode visualizar a versão relevante no arquivo package.json. Dê um único exemplo do método de instalação:
como:
npm install [email protected]
Principais pacotes instalados
"node-sass": "^7.0.1",
"sass": "^1.53.0",
"sass-loader": "^7.0.3",
"style-resources-loader": "^1.4.1",
Alguns exemplos de capturas de tela
Se for um projeto novo, você também pode copiar diretamente todos os códigos a seguir em package.json e usar npm install
o comando para instalar os pacotes relevantes:
Se for um projeto anterior, você pode optar por adicionar o código relevante ao package.json e então inicializar a instalação da mesma forma:
npm install
{
"name": "vue3-test", //包名,自己修改为自己的项目名
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"init": "^0.1.2",
"vue": "^3.0.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"css-loader": "^2.0.2",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0",
"node-sass": "^5.0.0",
"sass": "^1.43.4",
"sass-loader": "^7.0.3",
"style-loader": "^0.23.1",
"style-resources-loader": "^1.4.1",
"vue-cli-plugin-style-resources-loader": "~0.1.5"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
Etapa 2: adicione o arquivo vue.config.js no diretório raiz do projeto e copie o seguinte código no arquivo
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'sass',
patterns: []
}
}
}