如何使用 webpack 和 Vue.js 正确 @import 外部 SCSS

发布于12月30日

在Material Component Web的示例中，我希望能够从my node_modules导入SCS，如下所示:

@import '@material/elevation/mdc-elevation';

但是，我在try 运行webpack构建时收到以下错误消息:

File to import not found or unreadable: @material/elevation/mdc-elevation.

@import './~/@material/elevation/mdc-elevation.scss';也不行.

我很确定这个问题在我的网页配置中的某个地方，但我不知道在哪里.

What did they do in 100's 101 in order to make it work?

这是我的npm-debug.log英镑，以备不时之需.

提前谢谢！

编辑:我希望能够导入scss个文件，而不是编译后的css.

推荐答案

知道了.

以下是我的网页2配置module.rules的一部分:

{
  test: /\.(sass|scss)$/,
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'sass-loader',
      options: {
        includePaths: [path.resolve(__dirname, 'node_modules')],
      },
    },
  ],
},

那我做错了什么？

旧的网页包配置规则如下所示:

{
  test: /\.(sass|scss)$/,
  use: ['style-loader', 'css-loader', 'sass-loader'],
  options: { includePaths: [path.resolve(__dirname, './node_modules')] },
},

看到区别了吗？我没有使用"sass loader"字符串，而是将其扩展到一个对象，其中包含loader名称和options对象，因为options仅适用于sass-loader.

(您也可以删除path.resolve，只写'node_modules'，但离开它可能更安全.)

查看此文档页面了解更多信息.https://webpack.js.org/configuration/module/#rule-use

如果没有这个加载器，你必须在每次导入前加上~，这个webpack会转换成node_modules文件夹，至少是我之前的配置.

Inside .vue files

这在中国行不通.vue文件，默认情况下vue-loader只使用sass加载程序without any options.

(不知什么原因，我无法让它工作……)