的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，一切都應該正確解析。