Sass / SCSS を使う方法

sass-loadernode-sasspackage.json に追加する。

$ yarn add sass-loader node-sass

langsass を指定する(Sass の場合)

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

langscss を指定する(SCSS の場合)

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

参考:

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

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

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-loaderpackage.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

タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です