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

Posted 2023-02-21

【中文标题】Webpack SASS 加载器无法对常见的 SCSS 导入进行重复数据删除

【英文标题】：Webpack SASS loader cannot dedupe common SCSS imports

【发布时间】：2016-08-23 22:01:05

【问题描述】：

我有以下结构：

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');

在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。这是一个sn-p：

//loaders.js

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

这是我观察到的：

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

我尝试过的事情：

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

更新

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

node-sass 重复导入每个 @import 而不进行任何类型的重复数据删除（我知道它不应该能够自行完成）。但是用于此类事情的node-sass-import-once 破坏了resolve-url-loader。

这是我的问题：

为什么 node-sass-import-once 会破坏 Webpack resolve-url-loader？ 有没有什么方法可以对导入的 Webpack 进行重复数据删除，并在生成的 CSS 中避免样式重复？

【参考方案1】：

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

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

css @import 是相对于当前目录的。为了解决“像一个模块”你可以前缀〜。

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

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

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

然后使用波浪号导入：

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

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

【讨论】：

我会试一试，但波浪号导入几乎从未对我有用。将使用我的 webpack 配置进行更新。是的，我正在尝试从 node_modules

导入

看来我只剩下几分钟来奖励赏金了。感谢您查看问题并尝试回答，我会将其奖励给您，但我会留给其他人稍后回答。