12

我有以下结构：

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

这是我观察到的：

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

我尝试过的事情：

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

更新

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

node-sass 重复导入每个@import而不进行任何类型的重复数据删除（我知道它不应该能够自己完成）。但这node-sass-import-once意味着这种事情会破坏 resolve-url-loader。

以下是我的问题：

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

1 回答 1

3

在没有看到您的 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并且一切都应该正确解决。

于 2016-05-10T21:48:04.327 回答