的WebPack SASS装载程序无法重复数据删除常见SCSS进口

Question

我有以下结构：

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。这里有一个片段：

//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-file.ttf in 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这是意味着这种事情，打破了解析URL链接器。

这里是我的问题：

1. 为什么一次节点萨斯进口突破的WebPack决心，网址加载器？
2. 有没有什么办法去重复导入Webpack并获得生成的CSS免费样式重复？

Answer 1

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

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

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

因此，也许像​​这样的东西可能会伎俩。

解决进口这种方式也解决了一个问题，我在那里x.css被要求通过x.js和y.css当x.css进口了一些青菜变量配置进口。在配置的WebPack使用resolve.alias我可以简单地这样做：

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

然后用波浪线导入：

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

如果这个工程，那么你不必删除node-sass-import-once，一切都应该正确解析。