Vue CLIでsassやscssを使う方法（style lang=”scss” scoped）エラー対処法｜Failed to resolve loader: sass-loaderとModule build failed (from ./node_modules/sass-loader/dist/cjs.js)

vue-js-prograshi（プロぐらし）-kv Vue.js
記事内に広告が含まれていることがあります。
[PR]

Vue CLIではVue単一コンポーネントファイル（.vue）の中でSassやScssを使ってスタイルを記述することができます。

そのためにはsassモジュールとsass-loaderモジュールをインストールする必要があります。

なお、sass-loaderが正しくインストールされていないと以下のようなエラーが発生します。


sass-loaderがインストールされていない場合

sass-loaderをインストールしていない場合、npm run serveを実行したときに次のようなエラーが発生します。

 ERROR  Failed to compile with 1 error                                                                     15:54:07

Failed to resolve loader: sass-loader
You may need to install it.
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\hiberfil.sys'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\pagefile.sys'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\swapfile.sys'


sass-loaderのバージョンが互換性が無い場合

また、なんでもかんでもsass-loaderを入れればいいというわけではありません。

VueCLIではWebpackを使ってコンパイルをしていますが、sass-loaderのバージョンによっては互換性がなく、コンパイルができず次のようなエラーが発生することがあります。

./src/components/UserDetail1.vue?vue&type=style&index=0&id=30d1a196&lang=scss&scoped=true (./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!./node_modules/vue-loader-v16/dist/stylePostLoader.js!./node_modules/postcss-loader/src??ref--9-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/components/UserDetail1.vue?vue&type=style&index=0&id=30d1a196&lang=scss&scoped=true)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (C:\Users\hlaup\documents\projects\82_vue\local-pj\node_modules\sass-loader\dist\index.js:25:24)


sass-loaderのインストール

Vue CLIのデフォルトのバージョンv4系を使用する場合は以下のコマンドを実行します。

npm install -D sass-loader@^10 sass

sass-loaderのバージョン10.x系と、sassの最新バージョンをインストールするコマンドです。

「-D」オプションは「--save-dev」のショートオプションです。開発環境用のパッケージとしてインストールします。（※-dは全く違うオプションなので注意してください）

このため、npm install -Dを実行すると「devDependencies」にインストールしたパッケージが記述されます。

合わせて読みたい

package.jsonの「devDependencies」って何？という方は下記をご参考ください。

【初心者向け】package.jsonのdependenciesとdevDependenciesの違いや使い方


実例

コマンド実行後に以下のように表示されれば完了です。

$ npm install -D sass-loader@^10 sass
（省略）
+ sass@1.49.0
+ sass-loader@10.2.1
added 7 packages from 6 contributors, removed 2 packages, updated 2 packages and audited 1350 packages in 13.029s  
found 22 vulnerabilities (2 low, 16 moderate, 4 high)
  run `npm audit fix` to fix them, or `npm audit` for details

正しくインストールされているかpackage.jsonで確認しておきます。

  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "sass": "^1.49.0",
    "sass-loader": "^10.2.1"
  },

“sass”: “^1.49.0″と”sass-loader”: “^10.2.1″の記述があることがわかります。

これで、インストール完了です。あとは、npm run serveを実行するとコンパイルが成功してページが開けます。

合わせて読みたい

バージョンの冒頭についている「^」や「~」が気になった方は下記をご参考ください。

【npm】package.jsonのバージョン指定「^」キャレット、「~」チルダ、「*」アスタリスク、xとは何かを実例でわかりやすく解説


Vue CLIのバージョンを確認する方法

Vue CLIのバージョンはvue --versionで確認できます。

$ vue --version
@vue/cli 4.5.15


.vueファイルでscssまたはsassを使う方法

単一コンポーネントファイル（.vue）でscssまたはsassを使うには、styleタグにlang属性を設定し、言語を指定します。

scssを使う場合

<style lang="scss">


sassを使う場合

<style lang="sass">


scopedと一緒に使う場合

通常、指定したCSSスタイルを現在の.vueファイルのコンポーネントのみに適用するので、styleタグにscoped属性もつける使い方が一般的です。

<style lang="scss" scoped>


（参考）.vueファイルのテンプレ

scssでscopedを付けた場合、.vueファイルのテンプレートは以下のようになります。

<template>
  
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>



参考

Vue CLI公式 SASS

タイトルとURLをコピーしました