文章/答案/技术大牛

发布

社区首页 >问答首页 >模块未找到:错误:无法解析“文件”或“目录”(在webpack中导入sass )

问模块未找到:错误:无法解析“文件”或“目录”(在webpack中导入sass )
EN

Stack Overflow用户

提问于 2016-07-15 02:02:36

回答 1查看 6K关注 0票数 3

我的项目结构是：

/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文件夹。

每次将导入sass库放入main.scss时都会出错，这迫使我将import放到index.js中。不管怎样，想解决问题？

更新：

我发现在\src\styles\materialize\sass\components\_variables.scss中有配置

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

但这是与components有关的，这是webpack的错误吗？

css

import

sass

webpack

webpack-dev-server

Stack Overflow用户

回答已采纳

发布于 2016-07-15 03:50:59

我认为这是一个与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，它试图为您修复urls。

票数 5

查看全部 1 条回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38386797

复制

相似问题

问模块未找到:错误:无法解析“文件”或“目录”(在webpack中导入sass )
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问模块未找到:错误:无法解析“文件”或“目录”(在webpack中导入sass )EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问模块未找到:错误:无法解析“文件”或“目录”(在webpack中导入sass )
EN