没有波浪号 (~) 无法从 node_modules 导入样式表

Question

我正在尝试使用 material-components-vue 和 vue-cli 使用 webpack 创建一个简单的网络应用程序，但是，我发现如果没有前面的 [=22]，我无法从 node_modules 导入样式表=].

我已经尝试了几个 webpack/vue-cli 配置，并最终在 vue.config.js 中配置了一个传递加载程序选项。

我的 vue.config.js 看起来像这样：

module.exports = {
    css: {
      loaderOptions: {
        sass: {
          includePaths: [
              './node_modules', //here I include node_modules
            ]
        },
      }
    }
  }

所以我希望能够像这样导入东西：

@import 'normalize/normalize'

（假设我的 node_modules 中有一个名为 normalize 的目录，其中包含一个文件 normalize.scss）

但是webpack报错，说找不到模块。
但是，这确实有效：

@import '~normalize/normalize'

如果所有@import都是我写的，这不会有问题，但是因为我使用了第三方模块，里面有@import，所以webpack编译失败。

编辑 1：

正如@Styx要求

Share more configs, please

和

show the output of vue inspect --rule scss, and the whole file with this problematic import

这里是：

我的问题文件非常空：

<template>
  <div id="app">
    <m-button>Hello</m-button>
  </div>
</template>

<script>
import Vue from 'vue'
import Button from 'material-components-vue/dist/button'
Vue.use(Button)

export default {
  name: 'App',
  components: {
}
</script>

<style lang="scss">
@import "~material-components-vue/dist/button/styles"; //this works
@import "material-components-vue/dist/button/styles"; //but this does not
</style>

我的 vue inspect --rule scss 输出位于 here

所有其他配置由 vue init webpack <name>

生成

编辑 2：重现此问题的具体步骤：

初始化一个 vue-webpack 应用程序：

vue init webpack .

Vue 构建：运行时 + 编译器（默认）
Vue 路由器：无
包管理器：npm
然后，安装sass-loader

npm i -D sass-loader node-sass

创建文件 vue.config.js 并用以下内容填充它：

module.exports = {
    css: {
      loaderOptions: {
        sass: {
          includePaths: [
              './node_modules', //here I include node_modules
            ]
        },
      }
    }
  }

之后，安装包含scss/sass的模块（例如 material-components-web、npm i material-components-web）
然后，创建对位于 node_modules 的样式表的导入，如下所示：

@import '@material/button/mdc-button'; //mdc-button comes with material-components-web

最后，启动开发服务器：

npm run dev

它会抛出以下错误：

 ERROR  Failed to compile with 1 errors                                                                        11:36:35 AM

 error  in ./src/App.vue

Module build failed: 
@import '@material/button/mdc-button';
^
      File to import not found or unreadable: @material/button/mdc-button.
      in /home/maxim/projects/holiday.js/Whosebug/src/App.vue (line 18, column 1)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compil
er?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"s
ourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-359 13:3-17:5 14:22-367
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

顺便说一句，在第一个示例中我想导入 material-components-vue/dist/foo/styles，但在这里我导入 @material/foo.

Answer 1

在此配置中，您的 vue.config.js 被忽略。此文件是 used by @vue/cli-service，但您使用的是 webpack-dev-server。因此，您的 sass-loader 不会收到此 includePaths 选项。

您可以使用现代 vue create <app-name> 命令，或者如果您想修改现有项目：

打开 build/utils.js 文件。

在exports.cssLoaders函数中查找return ...：

return {
  ...
  sass: generateLoaders('sass', { indentedSyntax: true }),
  scss: generateLoaders('sass'),
  ...
}

修改为：

const includePaths = [path.resolve(__dirname, '..', 'node_modules')];
return {
  ...
  sass: generateLoaders('sass', { indentedSyntax: true, includePaths }),
  scss: generateLoaders('sass', { includePaths }),
  ...
}

删除未使用的 vue.config.js 文件。

没有波浪号 (~) 无法从 node_modules 导入样式表

Cannot import stylesheets from node_modules without tilde (~)

javascript

vue.js

webpack

vue-cli

sass-loader

编辑 1：

编辑 2：重现此问题的具体步骤：