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时，我会在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配置之前配置了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？

Answer 1

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

如果要从node_modules导入CSS，则可能必须使用~。正如索克拉自己在this issue中所说：

css @import是相对于当前目录的。要解析“像模块一样”，你可以加上〜。

所以像@import `~module/my_component.scss`;这样的东西可能就可以了。

以这种方式解决导入问题也解决了x.css x.js需要y.css并x.css导入// webpack.config.js resolve: { alias: { styles: 'src/styles/' } }导入某些sass变量配置时出现的问题。在Webpack配置中使用resolve.alias我可以简单地执行以下操作：

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

然后使用代字号导入：

node-sass-import-once

如果此方法有效，则无需删除command! Mycmd setlocal ts=2 sw=2 sws=2 expandtab，所有内容都应正确解析。

Webpack SASS加载程序无法重复使用常见的SCSS导入

1 个答案: