Sass / SCSS を使う方法 [Vue.js]

Sass / SCSS を使う方法

sass-loader と node-sass を package.json に追加する。

$ yarn add sass-loader node-sass

lang に sass を指定する（Sass の場合）

<style lang="sass">
  // Sass
</style>

lang に scss を指定する（SCSS の場合）

<style lang="scss">
  // SCSS
</style>

参考：

Vue + Webpack + Sass を使った Web アプリケーションの作り方 – Qiita

Vue.js で Sass を使う | １日ひとつ、強くなる。

webpack4 で Vue と SCSS をコンパイルする方法が変更になった | MK Dev

webpack で Vue ファイルと SCSS + ExtractTextPlugin をビルドする – Qiita

プリプロセッサの使用 | vue-loader [公式]

Using Pre-Processors | Vue Loader [Official]

import

参考：

vue.js で @material  の scss を import するだけで消耗した話 – Qiita

全ファイルで共通の変数、ミックスインを読み込む

sass-resources-loader を package.json に追加する。

$ yarn add sass-resources-loader

Webpack にルールを追加する。

{
  loader: 'sass-resources-loader',
  options: {
    resources: path.resolve(__dirname, '../src/style/_variables.scss')
  }
}

参考：

Vue 単一ファイルコンポーネントで共通の SCSS ファイルを読み込む | UUUM 攻殻機動隊

プリプロセッサの使用 | vue-loader [公式]

オプションリファレンス | vue-loader [公式]

vuejs/vue-loader: Webpack loader for Vue.js components – GitHub

Globally Load SASS into your Vue.js Applications – Vue.js Tutorials | VueSchool

sass-resources-loader で Sass (indented syntax) を使う

参考：

error loading .sass file in .vue files with styles with scss syntax · Issue #44 · shakacode/sass-resources-loader – GitHub