Webpack SASS 加载器无法对常见的 SCSS 导入进行重复数据删除 [英] Webpack SASS loader cannot dedupe common SCSS imports

问题描述

我有以下结构:

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

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

I'm trying to import the styles in my_component.scss. This file contains @font-face declarations with references to ../font/. So something like:

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

在 my_app.js 中，我需要与之关联的 SCSS 文件.所以

In my_app.js I'm requiring the SCSS file associated with it. So

// my_app.js

require('./my_app.scss');

//other app-specific code

我是 my_app.scss，我正在导入 my_component.scss:

I'm my_app.scss, I'm importing my_component.scss:

// my_app.scss

import 'my_component';

并且 sassConfig 设置为解析为 node_modules/my_component/scss 以便导入工作.

and the sassConfig is set to resolve to node_modules/my_component/scss so that the import works.

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

My loader config uses sass-loader, resolve-url-loader and css-loader. Here's a snippet:

//loaders.js

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

这是我观察到的:

1. 当我运行 webpack-dev-server 时，url 引用正确解析
2. 但是，当我使用相同的 conf 文件运行 webpack 时，我得到 Module not found: Error: Cannot resolve 'file' or 'directory' ../font/font-filesrc/font/
中的 .ttf

1. When I run webpack-dev-server, the url references resolve correctly
2. However, when I run webpack with the same conf file, I get Module not found: Error: Cannot resolve 'file' or 'directory' ../font/font-file.ttf in src/font/

我尝试过的事情:

1. 使用 $font-path 变量来引用 ../fonts 并将其设置为 node_modules/my_components/font
2. 检查我的加载器的顺序，更新我的 webpack 版本等

1. Using a $font-path variable to refer to ../fonts and setting it to node_modules/my_components/font
2. Checking the order of my loaders, updating my webpack version etc.

更新

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

My sassLoader config previously had configuration for node-sass-import-once. When I removed it, my font urls started resolving again, however my generated CSS contains a ton of duplicate styles.

node-sass 重复导入每个 @import 而不进行任何类型的重复数据删除(我知道它不应该自己完成).但是 node-sass-import-once 用于这种事情，破坏了 resolve-url-loader.

node-sass is repeatedly importing each @import without doing any sort of deduping (I know it's not supposed to be able to do it by itself). But node-sass-import-once which is meant for this sort of thing, breaks resolve-url-loader.

这是我的问题:

1. 为什么 node-sass-import-once 会破坏 Webpack resolve-url-loader?
2. 有什么方法可以对导入的 Webpack 进行重复数据删除并生成没有样式重复的 CSS?

推荐答案

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

Without seeing your Webpack config I can only hazard a guess but it looks like you are trying to import a CSS file from node_modules.

当您想从 node_modules 导入 CSS 时，您可能必须使用 ~.正如索克拉本人在这个问题中所说:

When you want to import CSS from node_modules you may have to use the ~. As sokra himself says in this issue:

css @import 相对于当前目录.为了解决像模块一样"，你可以前缀 ~.

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

所以也许像 @import `~module/my_component.scss`; 这样的东西可能会起作用.

So maybe something like @import `~module/my_component.scss`; might do the trick.

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

Resolving imports this way also solved an issue I had where x.css was required by x.js and imported by y.css when x.css imported some sass variable config. Using resolve.alias in Webpack config I could simply do something like:

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

然后使用波浪号导入:

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

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

If this works then you needn't remove thenode-sass-import-once and everything should resolve correctly.

这篇关于Webpack SASS 加载器无法对常见的 SCSS 导入进行重复数据删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！