Tech▶VueJS

vueでscssを利用する

  • このエントリーをはてなブックマークに追加

vue-cliのバージョンは4.5.13を想定。
vue createした時に「Manually select features」を選択して「CSS Pre-processors」を選択すれば最初から入るが、「Default」を選択した場合は、babelとeslintが有効になるだけである。

vue --version
@vue/cli 4.5.13

後から入れる場合は、sassとsass-loaderをdevDependenciesに追加する。ただし、sass-loaderは現時点でバージョンが12.1.0であり、webpackの依存バージョンが競合してエラーになってしまう。
回避するためにはバージョンを指定してインストールする。それぞれvue-cliで最初に有効にした場合にインストールされるバージョンを指定する。
これらのバージョンは、ここで参照する事ができます。

npm install --save-dev sass@1.26.5
npm install --save-dev sass-loader@8.0.2

上記では8.0.2を指定していますが、vue-cliが4.5.13で作ったpackage.jsonに対しては、sass-loader@10.2.0まではインストール可能です。

sass-loaderのpeerDependenciesが、10.2.0では次の指定に対して、

10.2.0
"webpack": "^4.36.0 || ^5.0.0"

11.0.0からは、次のようになっているからです。

11.0.0
"webpack": "^5.0.0"

@vue/cli-plugin-babelのバージョンは4.5.13で、そのdependenciesに"webpack": "^4.0.0"とあり、4.46.0が実際にインストールされています。

書き方

vueファイルのstyleにlang="scss"と書く。

サンプル
<style lang="scss">
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    margin-top: 60px;
  }
  body {
    color: blue;
    p {
      font-weight: bold;
    }
  }
</style>

参考