如何使用 webpack 和 Vue.js 正确@import 外部 SCSS? [英] How to @import external SCSS properly with webpack and Vue.js?

问题描述

在 Material Component Web 的示例中，我希望能够像这样从我的 node_modules 导入 SCSS:

As in Material Component Web's example, I want to be able to import SCSS from my node_modules like this:

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

但是，我在尝试运行 webpack 构建时收到此错误消息:

However, I'm getting this error message when trying to run the webpack build:

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

@import './~/@material/elevation/mdc-elevation.scss'; 也不起作用.

我很确定问题出在我的 webpack 配置中，但我不知道在哪里.

I'm pretty sure the issue is somewhere in my webpack config, but I can't figure out where.

他们在 Material Components Web 的<一个 href="https://github.com/material-components/material-components-web/tree/master/framework-examples/vue" rel="noreferrer">Vue.js 示例 以使有用吗?

What did they do in Material Components Web's Vue.js example in order to make it work?

这是我的 npm-debug.log，以备不时之需.这是相应的 Git 存储库:sk22/spg-tinf-sem03/proj01

Here's my npm-debug.log in case you need it. And here's the corresponding Git repository: sk22/spg-tinf-sem03/proj01

提前致谢！

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

I want to be able to import the scss files, not the compiled css.

推荐答案

知道了.

这是我的 webpack 2 配置的module.rules 的一部分:

here's a part of my webpack 2 config's module.rules:

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

那我做错了什么?我的 options 对象直接放置在规则中，而不是加载器中.

So what did I do wrong? My options object was placed in the rule directly, not the loader.

旧的 webpack 配置规则如下所示:

The old webpack config rule looked like this:

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

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

See the difference? Instead of the 'sass-loader' string, I extended it to an object, containing the loader name and the options object, because the options only apply to the sass-loader.

(您也可以删除 path.resolve 并只写node_modules"，但保留它可能更安全.)

(You could also drop the path.resolve and only write 'node_modules', but it might be safer to leave it.)

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

Check out this documentation page for further information. https://webpack.js.org/configuration/module/#rule-use

如果没有那个加载器，你必须在每个导入前添加一个 ~，webpack 会将其转换为 node_modules 文件夹，至少在我之前的配置中是这样.但这会破坏 3rd 方 SCSS 框架，例如 Material Components Web，因为它们使用 @import 语句本身没有前导 ~，例如 这里.

Without that loader, you must prefix each import with a ~, which webpack converts to the node_modules folder, at least with my previous configuration. But this will break 3rd party SCSS frameworks like Material Components Web, because they use @import statements without a leading ~ themselves, for example here.

在 .vue 文件中

这在 .vue 文件中不起作用，因为 vue-loader 默认只使用 sass-loader 没有任何选项.所以如果你想让它工作，你可能需要使用 vue-loader 自己的选项，如 在其文档中.

This will not work in .vue files, as vue-loader just uses sass-loader without any options by default. So if you want that to work, you probably need to make use of vue-loader's own options, as described in its documentation.

(由于某种我不知道的原因，我无法让它工作......)

(I'm unable to get it to work for some reason I don't know...)

这篇关于如何使用 webpack 和 Vue.js 正确@import 外部 SCSS?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！