vuejs/vue-cli

ModuleNotFoundError when using sass @import in combination with css modules

Open

#2,334 opened on 2018年8月23日

GitHub で見る
 (3 comments) (7 reactions) (0 assignees)JavaScript (29,754 stars) (6,328 forks)batch import
bugcontribution welcomehelp wantedscope: cli-service build

説明

Version

3.0.0-rc.11 - 3.0.5

Reproduction link

https://github.com/dattn/vue-cli-bug-demo

Node and OS info

Node v10.9.0 / Ubuntu 18.04

Steps to reproduce

npm install
npm run build

What is expected?

The scss files should be imported with Sass. The code should build successfully.

What is actually happening?

The relative scss files cannot be found. The build fails with the following error message:

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve './variables'

With vue-cli v3.0.0-rc.10, the code builds as expected. The problem exists as of version 3.0.0-rc.11. The latest version 3.0.5 also fails.

I think the source of the problem is the following commit: https://github.com/vuejs/vue-cli/commit/4220835

When I add the following props to the vue.config.js, the build works again:

module.exports = {
  css: {
    loaderOptions: {
      css: { importLoaders: 3 }
    }
  }
}

Related issue: #2055

コントリビューターガイド

技術スタック
vuecssnodejs
領域
frontendbuild system
Issue 種別
bug
難度新しい貢献者にとっての実装難度です。1 は非常に小さな変更、5 は専門的な作業です。
3
推定時間経験ある貢献者が調査、実装、テスト、pull request 準備にかけるおおよその時間範囲です。
half day
活動状況Issue が今どれだけ取り組みやすいかを示します。新しい、活発、古い、ブロック中、またはメンテナー入力待ちなどです。
stale
明確さ期待される変更、受け入れ条件、次の手順がどれだけ明確かを示します。
clear
前提条件
Basic Vue CLI knowledgeUnderstanding of webpack CSS loadersFamiliarity with SCSS
初心者向け度初回貢献者にどれだけ取り組みやすいかを 1-100 で推定したスコアです。
50
調査方針
Examine the commit 4220835 that introduced the regression. Test the provided workaround (adding importLoaders: 3 to vue.config.js) and verify it resolves the issue. Investigate why @import fails with CSS modules and whether the default importLoaders value should be changed. Also review the related issue #2055 for additional context.