【Mac】Vue cliでsassを利用する

https://cli.vuejs.org/guide/css.html

Pre-Processors

Macターミナル

# Sass
npm install -D sass-loader sass

Automatic imports

https://www.npmjs.com/package/vue-cli-plugin-style-resources-loader

Macターミナル

vue add style-resources-loader

vue.config.jsを編集

vue.config.js

const path = require('path')
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: [
        path.resolve(__dirname, './src/styles/*.scss'),
      ]
    }
  }
}

src/main.jsに追加

main.js

import Vue from 'vue'
import App from './App.vue'
import "./styles/style.scss";//ここで読み込む

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

自動で反映

Macターミナル

npm run serve