我正在尝试使用less-loader来加载较少的文件,并在顶部添加url.此url导入用于托管在其他位置(在cdn上)的文件.
app.less
@import url("http://cdn-name/mixins.less");
当我尝试使用less-loader加载这个较少的文件时,我收到以下错误:
ERROR in ./~/css-loader!./~/less-loader!./static-content/less/app.less
Module build failed: Cannot resolve 'file' or 'directory' ./http://cdn-name/mixins.less
似乎较少的加载器将我的url导入视为相对路径,而不是实际检测到它是包含要获取的资源的自己的url.
我的webpack配置如下所示:
module.exports = {
entry: {
bundle: ['./static-content/js/index.js'],
vendor: ['react', 'react-dom']
},
output: {
path: jsGeneratedPath,
filename: 'bundle.min.js',
publicPath: 'http://localhost:8444/assets/',
hotUpdateChunkFilename: 'hot/js-update.js',
hotUpdateMainFilename: 'hot/json-update.json',
recordsPath: path.resolve(__dirname, '/assets/hot/')
},
stats: {
colors: true,
reasons: true
},
module: {
preLoaders: [
{
test: /\.jsx?$/,
loader: 'eslint-loader',
exclude: /node_modules/
}
],
loaders: [
{
test: /.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
progress: true
},
{
test: /.less$/,
loader: 'style!css!less',
exclude: /node_modules/,
progress: true
}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor'],
minChunks: Infinity,
filename: '[name].min.js'
})
]
}
有关为什么会发生这种情况的任何想法?我认为它可能与我正在尝试导入的文件类型(较少的文件)有关,因为如果我将我的导入替换为css文件(例如托管在谷歌的某个CDN上),那么解决方案就好了.
我已尝试在网址周围使用和不使用引号.
webpack v 1.13.1
webpack-dev-server v 1.14.1
装载机v 2.2.3
最佳答案 我也面临同样的相对路径问题.
在选项中添加路径可以解决它.
{
loader: require.resolve('less-loader'),
options: {
importLoaders: 1,
paths: [path.resolve(__dirname, "node_modules")],
},
}