【環境構築】Sass/SCSS + Laravel Breeze/Vue.js

こちらで構築した環境にSassを追加します。

参考記事

Rubyのインストール

Windowsの場合、Rubyをインストールする必要があります。
下記よりインストールしてください。

Sassのインストール

インストールコマンド

gem install sass

バージョン確認

sass -v

バージョンが表示されればOKです。

vue.config.js

公式

プロジェクトのルートディレクトリ直下にvue.config.jsを作成し、追記。

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  css: {
    loaderOptions: {
      scss: {
        additionalData: '@import "@/assets/scss/variables.scss";'
      }
    }
  }
})

scss/vueファイル作成

任意のscss/vueファイルを作成、記述。

vueファイルに直接scssを記述す場合はlangで指定します。

test.vue

</template>
<style scoped lang="scss">

</style>

コンパイル

scssファイルのあるディレクトリまで移動してコマンドを実行します。

実行コマンド

sass test.scss:test.css

下記のようなファイルとディレクトリが自動生成されていれば完了です。

resources/js/app.js

参考記事

生成したcssファイルをグローバルに使えるようにします。
下記を追記

import '生成したcssファイル';

これで完了です。