模塊未發現：錯誤：無法解析 '文件' 或 '目錄'（在進口的WebPack SASS）

Question

我的項目結構爲：

/src/styles/main.scss

@import 'materialize/sass/materialize.scss'; 

.... 

我也嘗試@import './materialize/sass/materialize.scss';這裏 notwork。

它只有當我進口的lib中index.js

/src/index.js（這工作）

import './styles/reset.css'; 
import './styles/main.scss'; 
import './styles/font-awesome/font-awesome.scss'; 

的WebPack裝載機工作：

loaders: [ 
    { 
    test: /\.js?/, 
    exclude: [/node_modules/, /styles/], 
    loaders: ['babel'], 
    include: path.join(__dirname, 'src') 
    }, 
    { 
    test: /\.scss$/, 
    loader: 'style!css!sass' 
    }, 
    { 
    test: /\.css$/, 
    loader: "style-loader!css-loader" 
    }, 
    { 
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
    loader: 'url-loader?limit=10000&mimetype=application/font-woff' 
    }, 
    { 
    test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
    loader: 'file-loader' 
    } 

]

但有錯誤：

ERROR in ./~/css-loader!./~/sass-loader!./src/styles/main.scss 
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/roboto/Roboto-Thin.eot in E:\Project\simple-redux 
-boilerplate\src\styles 
@ ./~/css-loader!./~/sass-loader!./src/styles/main.scss 6:73945-73987 6:74010-74052 

ERROR in ./~/css-loader!./~/sass-loader!./src/styles/main.scss 
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/roboto/Roboto-Thin.woff2 in E:\Project\simple-red 
ux-boilerplate\src\styles 
@ ./~/css-loader!./~/sass-loader!./src/styles/main.scss 6:74104-74148 

ERROR in ./~/css-loader!./~/sass-loader!./src/styles/main.scss 
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/roboto/Roboto-Thin.woff in E:\Project\simple-redu 
x-boilerplate\src\styles 
@ ./~/css-loader!./~/sass-loader!./src/styles/main.scss 6:74181-74224 

ERROR in ./~/css-loader!./~/sass-loader!./src/styles/main.scss 
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/roboto/Roboto-Thin.ttf in E:\Project\simple-redux 
-boilerplate\src\styles 
@ ./~/css-loader!./~/sass-loader!./src/styles/main.scss 6:74256-74298 

ERROR in ./~/css-loader!./~/sass-loader!./src/styles/main.scss 
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/roboto/Roboto-Light.eot in E:\Project\simple-redu 
x-boilerplate\src\styles 
@ ./~/css-loader!./~/sass-loader!./src/styles/main.scss 6:74430-74473 6:74496-74539 

ERROR in ./~/css-loader!./~/sass-loader!./src/styles/main.scss 
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/roboto/Roboto-Light.woff2 in E:\Project\simple-re 
dux-boilerplate\src\styles 
@ ./~/css-loader!./~/sass-loader!./src/styles/main.scss 6:74591-74636 

ERROR in ./~/css-loader!./~/sass-loader!./src/styles/main.scss 
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/roboto/Roboto-Light.woff in E:\Project\simple-red 
ux-boilerplate\src\styles 
@ ./~/css-loader!./~/sass-loader!./src/styles/main.scss 6:74669-74713 

ERROR in ./~/css-loader!./~/sass-loader!./src/styles/main.scss 
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/roboto/Roboto-Light.ttf in E:\Project\simple-redu 
x-boilerplate\src\styles 
@ ./~/css-loader!./~/sass-loader!./src/styles/main.scss 6:74745-74788 

ERROR in ./~/css-loader!./~/sass-loader!./src/styles/main.scss 
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/roboto/Roboto-Regular.eot in E:\Project\simple-re 
dux-boilerplate\src\styles 
@ ./~/css-loader!./~/sass-loader!./src/styles/main.scss 6:74922-74967 6:74990-75035 

ERROR in ./~/css-loader!./~/sass-loader!./src/styles/main.scss 
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/roboto/Roboto-Regular.woff2 in E:\Project\simple- 
redux-boilerplate\src\styles 
@ ./~/css-loader!./~/sass-loader!./src/styles/main.scss 6:75087-75134 

ERROR in ./~/css-loader!./~/sass-loader!./src/styles/main.scss 
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/roboto/Roboto-Regular.woff in E:\Project\simple-r 
edux-boilerplate\src\styles 
@ ./~/css-loader!./~/sass-loader!./src/styles/main.scss 6:75167-75213 

ERROR in ./~/css-loader!./~/sass-loader!./src/styles/main.scss 
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/roboto/Roboto-Regular.ttf in E:\Project\simple-re 
dux-boilerplate\src\styles 
@ ./~/css-loader!./~/sass-loader!./src/styles/main.scss 6:75245-75290 

ERROR in ./~/css-loader!./~/sass-loader!./src/styles/main.scss 
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/roboto/Roboto-Medium.eot in E:\Project\simple-red 
ux-boilerplate\src\styles 
@ ./~/css-loader!./~/sass-loader!./src/styles/main.scss 6:75401-75445 6:75468-75512 

ERROR in ./~/css-loader!./~/sass-loader!./src/styles/main.scss 
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/roboto/Roboto-Medium.woff2 in E:\Project\simple-r 
edux-boilerplate\src\styles 
@ ./~/css-loader!./~/sass-loader!./src/styles/main.scss 6:75564-75610 

ERROR in ./~/css-loader!./~/sass-loader!./src/styles/main.scss 
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/roboto/Roboto-Medium.woff in E:\Project\simple-re 
dux-boilerplate\src\styles 
@ ./~/css-loader!./~/sass-loader!./src/styles/main.scss 6:75643-75688 

ERROR in ./~/css-loader!./~/sass-loader!./src/styles/main.scss 
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/roboto/Roboto-Medium.ttf in E:\Project\simple-red 
ux-boilerplate\src\styles 
@ ./~/css-loader!./~/sass-loader!./src/styles/main.scss 6:75720-75764 

ERROR in ./~/css-loader!./~/sass-loader!./src/styles/main.scss 
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/roboto/Roboto-Bold.eot in E:\Project\simple-redux 
-boilerplate\src\styles 
@ ./~/css-loader!./~/sass-loader!./src/styles/main.scss 6:75875-75917 6:75940-75982 

ERROR in ./~/css-loader!./~/sass-loader!./src/styles/main.scss 
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/roboto/Roboto-Bold.woff2 in E:\Project\simple-red 
ux-boilerplate\src\styles 
@ ./~/css-loader!./~/sass-loader!./src/styles/main.scss 6:76034-76078 

ERROR in ./~/css-loader!./~/sass-loader!./src/styles/main.scss 
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/roboto/Roboto-Bold.woff in E:\Project\simple-redu 
x-boilerplate\src\styles 
@ ./~/css-loader!./~/sass-loader!./src/styles/main.scss 6:76111-76154 

ERROR in ./~/css-loader!./~/sass-loader!./src/styles/main.scss 
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/roboto/Roboto-Bold.ttf in E:\Project\simple-redux 
-boilerplate\src\styles 
@ ./~/css-loader!./~/sass-loader!./src/styles/main.scss 6:76186-76228 

看起來像webpack搜索一個錯誤的目錄，而不是搜索fonts文件夾下的materialize。

每當我把導入sass lib放入main.scss時，我都會收到錯誤，這迫使我把import設置爲index.js。無論如何解決方法？

更新：

我發現有配置在 \src\styles\materialize\sass\components\_variables.scss：

$roboto-font-path: "../fonts/roboto/" !default; 

但它涉及到components，這是的WebPack的錯誤嗎？

Answer 1

我認爲這是一個與css-loader或sass-loader有關的問題，不知何故它們在node_modules內部沒有正確解析路徑。這就是你有這些錯誤的原因。

查看錯誤：

Error: Cannot resolve 'file' or 'directory' ../fonts/roboto/Roboto-Bold.woff in E:\Project\simple-redux-boilerplate\src\styles 

看來，css-loader試圖尋找../fonts/您src/styles文件夾內。

作爲解決方法，您可以指定「正確」的字體放置位置作爲您的$roboto-font-path變量。如果通過npm install materialize-css安裝，你可以做到以下幾點：

$roboto-font-path: '~materialize-css/fonts/roboto/'; 

的符號（〜）字符會說你裝載機尋找到node_modules。然後，當解決你的路徑時，你的裝載機將尋找正確的位置，並且不會有錯誤。

I think (and tested it locally) you don't need to use the tilde character to look at node_modules using sass-loader .

如果不想看看node_modules（因爲你喜歡手動下載的依賴），你可以只使用相對路徑。在你的情況下，$roboto-font-path: './materialize/fonts/roboto/';應該修復它。

---

更新：

您也可以嘗試使用resolve-url-loader，任何試圖修復網址爲您服務。

---

相關：

How do I load font-awesome using SCSS (SASS) in Webpack using relative paths?