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 を使う | 1日ひとつ、強くなる。
webpack4 で Vue と SCSS をコンパイルする方法が変更になった | MK Dev
webpack で Vue ファイルと SCSS + ExtractTextPlugin をビルドする – Qiita
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 攻殻機動隊
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) を使う
参考: