Sass 如何使用webpack和Vue.js正确@import外部SCS？

在Material Component Web的示例中，我希望能够从我的

节点_模块导入SCS，如下所示：

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

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

{
  test: /\.(key)$/,
    use: [
  {
    loader: '//ld//-loader',
    options: {
      /*Options passed to generateLoaders('//ld//', options)*/
    },
  },
],
}

但是，我在尝试运行webpack生成时收到以下错误消息：

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

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

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

他们在中做了什么以使其工作？

这是我的，以防你需要。
下面是相应的Git存储库：

提前谢谢

编辑：我希望能够导入scss文件，而不是编译后的css。
明白了

这是我的Webpack2配置的
模块的一部分。规则
：

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

那么我做错了什么？
我的
选项
对象直接放置在规则中，而不是加载程序中

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

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

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

{
  test: /\.(key)$/,
    use: [
  {
    loader: '//ld//-loader',
    options: {
      /*Options passed to generateLoaders('//ld//', options)*/
    },
  },
],
}

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

（您也可以删除path.resolve并只写“node_modules”，但离开它可能更安全。）

有关更多信息，请查看此文档页

如果没有该加载程序，您必须在每次导入之前添加一个
~
，该网页包将转换为
节点\u modules
文件夹，至少与我以前的配置相同。
但这将破坏第三方SCS框架，例如，因为它们使用
@import
语句，而本身没有前导的
~

内部.vue文件

这在.vue文件中不起作用，因为默认情况下，
vue loader
只使用sass loader，没有任何选项。
因此，如果您希望这样做，您可能需要使用vue loader自己的选项，如前所述

（由于某种原因，我无法使其正常工作…
编辑：Webpack现在有一个关于sass loader的部分：还提到includepaths

我对@material和Vue也有同样的问题。我在不直接调整
use
属性的情况下成功地解决了这个问题

解决方案

步骤1：首先使用CLI创建默认的Vue 2.1项目。
您的文件结构将有一个
/build
目录

步骤2：打开文件“utils”，您将看到一个
cssLoaders（）
函数，该函数为
vue加载程序所支持的语言返回一个对象/映射

您将在该地图中看到
sass
和
scss

步骤3：将
sass
和
scss
的值更改为：

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

步骤4：转到正在使用的.vue文件，将
元素中的
lang
属性更改为
sass
或
scss

步骤5：完成后，转到终端/控制台，用以下设备安装
sass loader
：

npm安装sass加载程序节点sass网页包--保存开发

步骤6：然后运行
npm run dev
，它应该可以工作

为什么这样做？

库

我仔细研究了一下，发现它使用了一些选项，比如@22samuelk提到的
includePaths
。IncludePaths告诉节点sass或更确切地说是底层库包含来自该目录/路径的sass文件

Vue

Sass加载程序选项

默认情况下，Vue希望您的资产位于项目
src/assets
文件夹中（如果我错了，请纠正我）。但是，您可以使用
~
指示您希望从项目根目录开始，该目录类似于“~/node\u modules/@material/smth/mdc-smth.scss”

现在，如果你想让你的sass加载器使用那些选项之外的东西，你需要明确地告诉他们

因此
path.resolve（uuu dirname，../node\u modules'
，因为
utils
文件位于
/build
中，您需要使用
sass加载程序的绝对路径来了解查找位置

Vue加载程序配置

这并不是问题的具体内容，但在
vue loader.conf.js
中定义的vue loader配置如下：

它使用
cssLoaders（）
返回的映射来构建webpack所需的加载程序。
返回的映射（
{key:value}
）然后通过提供
key
作为加载程序对象的
test:
中使用的文件扩展名来使用。
value
用作加载程序对象。
哪一个会像这样：

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

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

{
  test: /\.(key)$/,
    use: [
  {
    loader: '//ld//-loader',
    options: {
      /*Options passed to generateLoaders('//ld//', options)*/
    },
  },
],
}

其中，
键
是文件扩展名。在这种情况下，它可能是
sass
或
scss
。并且
///ld/
是要使用的加载程序。它在步骤3中显示为
'sass'

希望这能澄清一些问题。我花了一些时间，因为我刚刚开始使用Vue。
尝试
@import'~/@material/elevation/mdc elevation'；
@sobolevn，这也不起作用。但是，链接的示例使用
@material/elevation/mdc elevation
导入它，因此这应该也能起作用。看看这个简单的测试示例：在这里：@HashemQolami我已经将此（作为网页包2）添加到我的配置中，因为链接的示例使用网页包1。我还尝试添加sassLoader对象，但它也不起作用。在.vue文件工作配置中：