VueでSASS(SCSS)が使えないときの対処方法(グローバル での読み込み)

2021年6月17日Vue.js

VueでSASS(SCSS)が使えないときの対処方法を紹介します。

VueでSASS(SCSS)が使えないときの対処方法

以下が導入から手順です。

sass loaderをインストール

まずQiitaのこちらの記事がとても参考になります。

今からVueのプロジェクトを新規作成するという段階の場合は、vue createしたときの質問でcssのプリプロセッサを導入しておきます。
すでにvueのプロジェクトを作成していてsass-loaderが入っていない場合、下のコマンドでsass-loaderをインストールします。

$ yarn add -D node-sass sass-loader

フォルダ構成

src/
|- assets/
|  |- sass/
|  |  |- abstracts/
|  |  |  |- _functions.scss
|  |  |  |- _mixins.scss
|  |  |  |- _variables.scss
|  |  |  
|  |  |- base/
|  |  |  |- _animation.scss
|  |  |  |- _base.scss
|  |  |  |- _typography.scss
|  |  |  |- _utilities.scss
|  |  |  
|  |  |- components/
|  |  |  |- _button.scss
|  |  |  |- _card.scss
|  |  |  |- _popup.scss
|  |  |  
|  |  |- layout/
|  |  |  |- _grid.scss
|  |  |
|  |  |- main.scss
|  |  |- prepends.scss
|  ...
|
|- main.js
|- App.vue

abstracts、base、components、layoutなどのフォルダを作成して、それらをmain.scssとprepends.scssでまとめます。

prepends.scss

変数の定義やmixinなどのcssを出力しないものは、prepends.scssに記述します。

@import "./abstracts/functions";
@import "./abstracts/mixins";
@import "./abstracts/variables";

main.scss

cssを出力するものは、main.scssに記述します。

@import "./base/animations";
@import "./base/base";
@import "./base/typography";
@import "./base/utilities";

@import "./components/button";
@import "./components/card";
@import "./components/popup";

@import "./layout/grid";


@import "./pages/home";

vue.config.jsを作成しprepends.scssを設定

vue.config.jsをプロジェクト直下に作成します。

そして、その中に、次のように記述します。

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: '@import "./src/assets/sass/prepends.scss";'
      }
    }
  }
}

このvue.config.jｓでprepends.scssを記述します。

main.jsにmain.scssをインポート

main.scssは、main.jsにてインポートします。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

require('@/assets/sass/main.scss');

createApp(App).use(router).mount('#app')

Syntax Error: SassError: Undefined mixin.

 error  in ./src/assets/sass/main.scss

Syntax Error: SassError: Undefined mixin.

Syntax Error: SassError: Undefined mixin.というエラーが出る場合、上の手順どおりになっているか確認します。

特に、vue.config.jsがsrcフォルダの中ではなく、プロジェクトの直下に配置されているか、scssのパスが正しいかを確認しましょう。