Web包SASS加载程序无法重复删除常见SCSS导入

我的结构如下：

node_modules
  - my_component
    - font
    - scss
      - my_component.scss
src
  - my_app.js
  - my_app.scss

我正在尝试导入

my_component.scss

中的样式。此文件包含引用到

。/font/

的

@font-face

声明。比如：

// my_component.scss
@font-face {
  font-family: 'Helvetica Neue';
  font-weight: $weight-medium;
  src: url('../font/font-file.eot');
}

// webpack.config.js
resolve: {
  alias: {
    styles: 'src/styles/'
  }
}

在

my_app.js

中，我需要与之关联的SCSS文件。所以

// my_app.js

require('./my_app.scss');

//other app-specific code

我是

my_app.scss

，我正在导入

my_component.scss

：

// my_app.scss

import 'my_component';

并且

sassConfig

被设置为解析为

node\u modules/my\u component/scss

，以便导入工作

我的加载器配置使用

sass加载器

，

解析url加载器

和

css加载器

。下面是一个片段：

//loaders.js

loaders.push({
  test: /\.scss$/,
  loader: 'style!css?sourcemap!resolve-url!sass?sourceMap'
});

以下是我观察到的情况：

当我运行

webpack dev server

时，

url

引用正确解析

但是，当我使用相同的conf文件运行

webpack

时，我得到

未找到模块：错误：无法在
src/font/
中解析'file'或'directory'../font/font file.ttf

我尝试过的事情：

使用

$font path

变量引用

。/fonts

并将其设置为

节点\模块/my\组件/font

检查我的加载程序的顺序，更新我的网页版本等

更新

My

sassLoader

config以前具有的配置。当我删除它时，我的字体URL再次开始解析，但是我生成的CSS包含大量重复的样式

节点sass重复导入每个

@import

，而不执行任何类型的重复数据消除（我知道它本身不应该能够完成）。但是

节点sass import once

用于这类事情，破坏了解析url加载器

以下是我的问题：

为什么节点sass导入一次就破坏了Web包解析url加载程序

是否有任何方法可以消除导入网页包的重复，并使生成的CSS不存在样式重复

---

在没有看到你的网页配置的情况下，我只能冒险猜测一下，但看起来你正试图从

节点\ u模块

导入CSS文件

当您想从

节点\u模块导入CSS时

可能需要使用

~

。正如索克拉本人在书中所说：

css@import是相对于当前目录的。对于“像模块一样”的解析，可以使用前缀~

所以可能类似于

@import`~module/my_component.scss`可能会起作用

通过这种方式解决导入问题也解决了我遇到的一个问题，即当
x.css
导入一些sass变量配置时，
x.js
需要
x.css
并由
y.css
导入。在Webpack配置中使用，我可以简单地执行以下操作：

// my_component.scss
@font-face {
  font-family: 'Helvetica Neue';
  font-weight: $weight-medium;
  src: url('../font/font-file.eot');
}

// webpack.config.js
resolve: {
  alias: {
    styles: 'src/styles/'
  }
}

然后使用波浪线导入：

// y.css
@import `~styles/x.scss

如果这样做有效，那么您无需删除
节点sass导入一次
，所有问题都应正确解决。
我会尝试一下，但tilde导入对我来说几乎不起作用。将使用我的网页包配置进行更新。是的，我正在尝试从
节点_模块导入
看起来我只有几分钟的时间来奖励奖金。我会把它奖励给你，感谢你看了这个问题并试图回答，但我会让其他人稍后再回答。