sass - Webpack SASS 加载器无法对常见的 SCSS 导入进行重复数据删除

Question

我有以下结构:

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

我正在尝试导入 my_component.scss 中的样式.此文件包含 @font-face引用 ../font/ 的声明.所以像:

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

在 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_modules/my_component/scss以便导入工作。

我的加载程序配置使用 sass-loader , resolve-url-loader和 css-loader .这是一个片段:

//loaders.js

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

这是我观察到的:

当我跑 webpack-dev-server , url引用正确解析

但是，当我运行 webpack 时使用相同的 conf 文件，我得到 Module not found: Error: Cannot resolve 'file' or 'directory' ../font/font-file.ttf在 src/font/

我尝试过的事情:

使用 $font-path变量引用 ../fonts并将其设置为 node_modules/my_components/font

检查我的加载程序的顺序，更新我的 webpack 版本等。

更新

我的 sassLoader config 以前有 node-sass-import-once 的配置.当我删除它时，我的字体 url 再次开始解析，但是我生成的 CSS 包含大量重复的样式。

node-sass 重复导入每个 @import没有做任何类型的重复数据删除(我知道它不应该能够自己完成)。但是 node-sass-import-once这意味着这种事情，打破了resolve-url-loader。

以下是我的问题:

为什么 node-sass-import-once 会破坏 Webpack resolve-url-loader？

有什么方法可以对导入的 Webpack 进行重复数据删除并生成没有样式重复的 CSS？

Answer 1

没有看到你的 Webpack 配置，我只能猜测，但看起来你正试图从 node_modules 导入一个 CSS 文件。 .

当你想从 node_modules 导入 CSS 时您可能必须使用 ~ .正如索克拉本人在 this issue 中所说的那样:

css @import is relative to the current directory. For resolving "like a module" you can prefix ~.

所以也许像 @import `~module/my_component.scss`;可能会起作用。

以这种方式解析导入也解决了我在 x.css 中遇到的问题由 x.js 要求并由 y.css 进口当 x.css导入了一些 sass 变量配置。使用 resolve.alias在 Webpack 配置中，我可以简单地执行以下操作:

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

然后使用波浪号导入:

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

如果这有效，那么您无需删除 node-sass-import-once一切都应该正确解决。