I am getting the below error when trying to use the less loader with webpack to compile my less files.
ERROR in ./~/css-loader?sourceMap!./~/less-loader?relativeUrls&noIeCompat!./app/styles/app.less
Module not found: Error: Cannot resolve 'file' or 'directory' ./fonts/randomfont.eot in C:\test\app\styles
@ ./~/css-loader?sourceMap!./~/less-loader?relativeUrls&noIeCompat!./app/styles/app.less 6:92-125
Following is my directory structure
---Test
|---App
| |---styles
| | |---fontImport
| | | |---randomfont.eot
| | |---app.less
| |--- app.js
|---webpack.config.js
Following are the contents of
app.jsrequire('./styles/app.less');
app.less
@import "./fontImport/fontimports.less";
body{
background: #fafafa;
color: #212121;
padding: 0;
margin: 30;
font-size: 60px;
}
fontImports.less
@font-face {
font-family: 'Times New Roman';
// Does not work
src: ~"url('./fonts/randomfont.eot')";
// Works
//src: ~"url('./fontImport/fonts/randomfont.eot')";
font-weight: normal;
font-style: normal
}
I am using the below webpack config
var path = require('path');
var extractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: './app/app.js',
devtool: 'sourcemap',
output: {
filename: 'test.js',
library: 'testlib',
libraryTarget: 'var',
path: './Content/Scripts',
pathinfo: true
},
resolve: {
extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" },
{
test: /\.less/,
loader: extractTextPlugin.extract(
"css?sourceMap!" +
"less?relativeUrls&noIeCompat"
)
},
{ test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/, loader: 'file?name=app/generated/[name].[ext]' },
]
},
plugins: [
new extractTextPlugin("../css/styles.css"),
]
}
In fontImports.less, If I provide relative path of the font form fontImports.less, webpack command is failing with the below error.
Hash: 1c54ca6132cc3c5db535
Version: webpack 1.12.13
Time: 1313ms
Asset Size Chunks Chunk Names
test.js 4.68 kB 0 [emitted] main
test.js.map 5.28 kB 0 [emitted] main
[0] ./app/app.js 31 bytes {0} [built]
+ 3 hidden modules
ERROR in ./app/styles/app.less
Module not found: Error: Cannot resolve 'file' or 'directory' ./fonts/randomfont.eot in C:\test\app\styles
@ ./app/styles/app.less 6:90-123
ERROR in ./app/styles/app.less
Module build failed: ModuleNotFoundError: Module not found: Error: Cannot resolve 'file' or 'directory' ./fonts/randomfont.eot in C:\test\app\styles
at C:\test\node_modules\webpack\lib\Compilation.js:229:38
at onDoneResolving (C:\test\node_modules\webpack\lib\NormalModuleFactory.js:29:20)
at C:\test\node_modules\webpack\lib\NormalModuleFactory.js:85:20
at C:\test\node_modules\async\lib\async.js:726:13
at C:\test\node_modules\async\lib\async.js:52:16
at done (C:\test\node_modules\async\lib\async.js:241:17)
at C:\test\node_modules\async\lib\async.js:44:16
at C:\test\node_modules\async\lib\async.js:723:17
at C:\test\node_modules\async\lib\async.js:167:37
at C:\test\node_modules\enhanced-resolve\lib\UnsafeCachePlugin.js:24:19
at onResolved (C:\test\node_modules\enhanced-resolve\lib\Resolver.js:38:18)
at C:\test\node_modules\enhanced-resolve\lib\Resolver.js:127:10
at C:\test\node_modules\enhanced-resolve\lib\Resolver.js:191:15
at applyPluginsParallelBailResult.createInnerCallback.log (C:\test\node_modules\enhanced-resolve\lib\Resolver.js:110:4)
at loggingCallbackWrapper (C:\test\node_modules\enhanced-resolve\lib\createInnerCallback.js:21:19)
at C:\test\node_modules\tapable\lib\Tapable.js:134:6
at Tapable.<anonymous> (C:\test\node_modules\enhanced-resolve\lib\DirectoryDefaultFilePlugin.js:21:12)
at Storage.provide (C:\test\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:52:20)
at CachedInputFileSystem.stat (C:\test\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:132:20)
at Tapable.<anonymous> (C:\test\node_modules\enhanced-resolve\lib\DirectoryDefaultFilePlugin.js:18:6)
at Tapable.applyPluginsParallelBailResult (C:\test\node_modules\tapable\lib\Tapable.js:139:14)
at Tapable.<anonymous> (C:\test\node_modules\enhanced-resolve\lib\Resolver.js:103:8)
at Tapable.Resolver.forEachBail (C:\test\node_modules\enhanced-resolve\lib\Resolver.js:196:3)
at Tapable.doResolve (C:\test\node_modules\enhanced-resolve\lib\Resolver.js:102:7)
at Tapable.resolve (C:\test\node_modules\enhanced-resolve\lib\Resolver.js:45:14)
at Tapable.resolve (C:\test\node_modules\enhanced-resolve\lib\UnsafeCachePlugin.js:23:14)
at C:\test\node_modules\webpack\lib\NormalModuleFactory.js:82:29
at C:\test\node_modules\async\lib\async.js:718:13
at async.forEachOf.async.eachOf (C:\test\node_modules\async\lib\async.js:233:13)
at _parallel (C:\test\node_modules\async\lib\async.js:717:9)
Child extract-text-webpack-plugin:
+ 3 hidden modules
ERROR in ./~/css-loader?sourceMap!./~/less-loader?relativeUrls&noIeCompat!./app/styles/app.less
Module not found: Error: Cannot resolve 'file' or 'directory' ./fonts/randomfont.eot in C:\test\app\styles
@ ./~/css-loader?sourceMap!./~/less-loader?relativeUrls&noIeCompat!./app/styles/app.less 6:90-123
If I provide the relative path from app.less, I am getting the expected result. Do I have to include any specific configuration to make the above work ?
You can repro this issue using the sample here
developit, tszymanek, 6pm, mikegutierrez, ezze and 20 more6pm, mmathys, ZxMYS and podorozhny
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4