Css 未找到模块：错误：无法解析'；文件'；或'；目录'；（在网页包中导入sass）

我的项目结构是：

/src/styles/main.scss

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

....

我还尝试了

@import./materialize/sass/materialize.scss'这里
不行

它只在我在index.js中导入lib时起作用

/src/index.js（这已成功）

网页包加载程序：

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
下的
font
文件夹

每次我将import sass lib放入
main.scss
时都会出错，这迫使我将
import
放入
index.js
。不管怎样，要解决这个问题吗

更新：

我发现里面有配置
\src\styles\materialize\sass\components\\u variables.scss
：

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

但是它与
组件相关，这是网页的错误吗？
我认为这是一个与
css加载程序
或
sass加载程序
相关的问题，在
节点模块
中，它们并没有真正正确地解析路径。这就是你犯这些错误的原因

请看错误：

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

似乎
css加载器
正在试图在
src/styles
文件夹中查找
./font/

作为一种解决方法，您可以将字体放置的“正确”位置指定为
$roboto font path
变量。如果通过npm安装materialize css安装，则可以执行以下操作：

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

波浪号（~）字符将告诉加载程序查看
node\u模块
。然后，在解析路径时，加载程序将查找正确的位置，并且不会出现错误

我认为（并在本地进行了测试）使用
sass-loader
查看
node\u模块时不需要使用tilde字符

如果不想查看
节点\u模块
（因为您更喜欢手动下载依赖项），您可以使用相对路径。在您的例子中，
$roboto字体路径：'./materialize/fonts/roboto/'应该修复它


更新：

您还可以尝试使用，它尝试为您修复URL


相关的：

谢谢你的回答<代码>解析url加载程序
非常有用！这种方法实际上适用于许多类似的
scs
依赖性问题！
$roboto-font-path: '~materialize-css/fonts/roboto/';