找不到模块：错误：无法解析“文件”或“目录”（在 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。然后，在解析路径时，加载程序会寻找正确的位置并且不会出现错误。

我认为（并在本地测试过）您不需要使用波浪号来查看node_modules使用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?