3
respostas

Erro scss

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

3 respostas

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!