Oi Flávio. Mesmo seguindo o passo a passo, aqui só funcionou quando realizei a separação do codigo css para o arquivo Botao.scss. Apenas colocando lang="scss" no Botao.vue não funcionou. Obrigado
Oi Flávio. Mesmo seguindo o passo a passo, aqui só funcionou quando realizei a separação do codigo css para o arquivo Botao.scss. Apenas colocando lang="scss" no Botao.vue não funcionou. Obrigado
Oi Leandro. Cole a mensagem de erro que aparece no console para que eu possa ver.
Você usou exatamente a versão do Vue CLI que uso no curso?
A gente descobre a solução...
Erro na console
./src/components/shared/botao/Botao.vue
Module not found: Error: Can't resolve 'scss-loader' in '/home/lsauwen/workspace/alurapic/src/components/shared/botao'
@ ./src/components/shared/botao/Botao.vue 3:0-276
@ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/home/Home.vue
@ ./src/components/home/Home.vue
@ ./src/routes.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
package.json
{
"name": "alurapic",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "lsauwen <leandroassis@gmail.com>",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"bootstrap": "^3.3.7",
"jquery": "^3.1.1",
"vee-validate": "^2.0.0-beta.18",
"vue": "^2.2.1",
"vue-resource": "^1.0.3",
"vue-router": "^2.1.1"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-latest": "^6.0.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"node-sass": "^4.5.0",
"sass-loader": "^4.1.1",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"vue-loader": "^11.1.4",
"vue-template-compiler": "^2.2.1",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0"
}
}
Botao.vue
<style lang="scss">
$cor: firebrick;
.botao {
display: inline-block;
padding: 10px;
border-radius: 3px;
margin: 10px;
font-size: 1.2em;
}
.botao-perigo {
background: $cor;
color: white;
}
.botao-padrao {
background: darkcyan;
color: white;
}
</style>
Como verificar a versão do vue CLI?
Faça npm install scss-loader --save-dev
.
Em teoria isso não seria necessário, mas parece que ele está faltando na sua versão do Vue.js.
No aguardo!