webpack: Module not found: Error: Cannot resolve 'file' or 'directory' (import sass with a relative font folder in webpack)
/src/styles/main.scss
@import 'materialize/sass/materialize.scss';
....
I also try @import './materialize/sass/materialize.scss';
here
notwork.
It only work when I import the lib in index.js
/src/index.js (this worked)
import './styles/reset.css';
import './styles/main.scss';
import './styles/font-awesome/font-awesome.scss';
webpack loader:
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'
}
]
But got error:
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
I found there are config in
/src/styles/materialize/sass/components/_variables.scss
:
$roboto-font-path: "../fonts/roboto/" !default;
It looks like webpack
search for a wrong directory, not search fonts
folder under materialize
.
I got error every time when I put import sass lib in main.scss
, which force me to put import
to index.js
. Webpack should take the responsibility to generate correct absolute path base on imported relative path.
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Reactions: 25
- Comments: 25 (1 by maintainers)
Just had this problem too. It’s an error in finding the right directory. Use the path relative to /.
In my case, instead of using
../../../assets/(...)
, I changed the path to/assets/(...)
.I just add
resolve-url
to scss, it works for me.@rodrigobacelli I don’t want to edit source file, this https://www.npmjs.com/package/resolve-url-loader module can solve the problem.
its worked for me
Without Modifying Webpack File, this works!!
@ssijak if you are having this issue, make sure that you are generating source map as shown in the example config by @eromoe . See the docs: https://www.npmjs.com/package/resolve-url-loader#source-maps-required
@eromoe, @kilroy05 , do you have any idea how we could configure this with angular-cli?
it is addressed in this issue.
CSS URL handling was changed. To replicate the behavior prior to beta.32, use a root relative URL (i.e., add a / to the beginning of each URL).
Thanks to clydin
you can import css file ex: @import materialize/css/materialize.css’
Where is the webpack bundle configuration file for Angular Cli “version”: “1.0.0-beta.17”??