找不到模塊：錯誤：無法解析“文件”或“目錄”（在Webpack中導入sass）

Question

我的項目結構是：

/src/styles/main.scss

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

....

我也嘗試@import './materialize/sass/materialize.scss'; 這里不行。

僅當我在index.js中導入lib時才有效

/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在錯誤目錄下搜索，而不是在materialize下搜索fonts文件夾。

每次將import 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正在嘗試在src/styles文件夾中找到../fonts/ 。

解決方法是 ，您可以將字體放置的“正確”位置指定為$roboto-font-path變量。 如果通過npm install materialize-css ，則可以執行以下操作：

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

代字號（〜）字符將告訴您的加載程序以查看node_modules 。 然后，在解析路徑時，裝載機將尋找正確的位置，並且不會出現任何錯誤。

我認為（並在本地對其進行了測試）您不需要使用波浪號字符就可以使用sass-loader查看node_modules 。

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

---

更新：

您也可以嘗試使用resolve-url-loader ，它會嘗試為您修復網址。

---

有關：

如何使用相對路徑在Webpack中使用SCSS（SASS）加載超棒的字體？