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以便导入工作.

我的loader配置使用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/

我试过的事情:

更新

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

node-sass反复导入每个@import而不进行任何类型的重复数据删除(我知道它不应该自己做).但是node-sass-import-once这是针对这种事情的,打破了resolve-url-loader.

这是我的问题:

Answer 1

如果没有看到你的 Webpack 配置，我只能大胆猜测，但看起来你正在尝试从node_modules.

当您想从中导入 CSS 时，node_modules您可能必须使用~. 正如 sokra 本人在本期中所说：

css @import 是相对于当前目录的。为了解决“像模块一样”的问题，您可以添加前缀 ~。

所以也许类似的东西@import `~module/my_component.scss`;可以解决问题。

以这种方式解决导入还解决了我在导入某些 sass 变量配置时x.css需要x.js和导入的问题。在 Webpack 配置中使用resolve.alias我可以简单地执行以下操作：y.cssx.css

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

然后使用波形符导入：

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

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