没有tilde(〜)，无法从node_modules导入样式表

Question

我正在尝试创建一个带有材料组件 - vue和vue-cli的简单Web应用程序，但是，我发现我无法从 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 s都是我写的，但是由于我使用了其中包含@import S的第三方模块，因此WebPack无法编译。

编辑1：

@styx要求

分享更多配置，请

和

显示Vue Inspect -Rule SCSS的输出，以及此问题的整个文件

这里是：

我的问题文件非常空：

<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的输出位于这里

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

生成的

编辑2：重现此问题的确切步骤：

1. 初始化vue-webpack应用程序：

vue init webpack .

2. VUE构建：Runtime Compiler(默认(
3. vue-router：no

4. 软件包管理器：NPM

5. 然后，安装sass-loader

npm i -D sass-loader node-sass

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

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

7. 之后，安装一个包含SCSS/SASS的模块(例如，对于material-components-web，npm i material-components-web(

8. 然后，为位于node_modules中的样式表创建导入，例如：

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

9. 最后，启动开发服务器：

npm run dev

10. 它将丢下以下错误：

 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/stackoverflow/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被忽略。此文件由@vue/cli-service使用，但是您正在使用webpack-dev-server。因此，您的sass-loader未接收此includePaths选项。

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

1. 打开build/utils.js文件。

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

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

3. 像这样修改它：

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

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