webpackのsass-loader設定方法について。sassでオリジナルの変数を作る（上書きする）。

12189 ワード
Sass scss webpack Sass テキストリンク

webpackでsass-loaderを使用する際に、設定ファイル（webpack.config.js）の記述がWEB上に複数存在しているため迷う。

vuetifyのSASS variablesのページがエラーも発生せず使用できる。

同じくvuetifyのgetting startedにも記述があるが、こちらはエラーが発生して使えなかった。エラー発生理由についてのまとめ。

エラーが発生した記述

下記ページを参照して記述を進めたところエラーが発生した。

webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.s(c|a)ss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            // Requires sass-loader@^7.0.0
            options: {
              implementation: require('sass'),
              indentedSyntax: true // optional
            },
            // Requires sass-loader@^8.0.0
            options: {
              implementation: require('sass'),
              sassOptions: {
                indentedSyntax: true // optional
              },
            },
          },
        ],
      },
    ],
  }
}

オプションにindentedSyntaxが記述されているが、これが設定されているとscssはエラーが発生する。

sassとscssの記述方法が異なっており、sassはインデントで行の区切りを示すのに対し、scssはcssと同じくカッコ{}やセミコロン;を使用するため。

この記述では/\.s(c|a)ss$/となっており、sassとscssのファイルを検出した場合にsass-loaderを使用する指示になっているが、sassかscssかでindentedSyntaxの要否が変わるため



また、上記のような記述はそのままコピペではダメで、バージョンに合わせて自分で選択する必要がある。

基本的にはv8の方を使用するためv7の記述は削除する。

使用する場合は、バージョンを絞り、scssはindentedSyntaxを非活性（削除）する。

webpack.config.js()
module.exports = {
  module: {
    rules: [
      {
        test: /\.s(c|a)ss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            // Requires sass-loader@^8.0.0
            options: {
              implementation: require('sass'),
              sassOptions: {
                //indentedSyntax: true // optional
              },
            },
          },
        ],
      },
    ],
  }
}


SASS variables

vuetifyのSASS variablesに記載の設定をするのがお勧め。
ここの記述方法を使用すると、vuetifyでデフォルトで設定されている変数のスタイルを変更することができる。

ページ内の記述はぱっと見かなり長く見えるが、先ほどと同様にバージョンを絞るとシンプルになる。

ここではscssとsassを別々に記述している。

webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.sass$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            // Requires sass-loader@^9.0.0
            options: {
              // This is the path to your variables
              additionalData: "@import '@/styles/variables.scss'"
            },
          },
        ],
      },
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            // Requires sass-loader@^9.0.0
            options: {
              // This is the path to your variables
              additionalData: "@import '@/styles/variables.scss';"
            },
          },
        ],
      },
    ],
  },
}

ファイルパスの設定

SASS variables（変数）を使用する場合、個人で作成したファイルを読み込ませる必要がある。

以下はその記述。

@import '@/styles/variables.scss'

・@import ファイルパス
ファイルパスのファイルを読み込む。

・@/styles/variables.scss
この@はファイルパスのエイリアス。別途設定する必要がある。
ここでは、@配下のstyles配下のvariables.scssを読み込んでいる。

@を使わずに、「./」などの相対パスで書くことも可能。

ファイルパスのエイリアス作成方法

ファイルパスのエイリアスを作成するにはwebpack.config.jsのresolveにaliasの設定を記述する。

webpack.config.js
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src/styles'),
    },

'エイリアス':path.resolve(__dirname, 'パス')の形で記述する。

上記例では、@ = src/stylesとなる。あとは、実際にフォルダを作成して、variables.scssを作成すればOK。

@を~に変えたり、ファイルパスを違うものにすれば別のエイリアスを設定できる。

＞webpackのresolve alias

SASS変数

vuetifyではsassを使った変数がデフォルトで設定されている。vuetifyはこの変数を使って、オシャレなボタンやテキストボックスをササッと提供してくれる。

デフォルトで設定されている変数の確認方法

vuetifyのSASS variablesのページ中段に記述されている。

タブでsassの変数を確認したい要素を選択する。$vuetifyは全体に適用されているもの。

v-btnやv-alertなどは各要素に個別に用意されている設定。

各変数とデフォルトの設定値が表示される。先ほど読み込みの設定をした、variables.scssで変数を指定してスタイルを記述するとデフォルトの設定を変更することができる。

＞sassの変数について


（補足）loaderの読み込み順序

sass-loaderをwebpack.config.jsファイルに記述するときは、必ず、

①(vue-)style-loader > ②css-loader > ③sass-loaderの順で記述する。

各loaderはchainで繋がれるため、実行する順番に記述しないとエラーが発生する。