Question

我尝试使用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文件交换（托管在google＆之一上）＃39;例如CDN）然后解决方案就好了。

我已尝试在网址周围使用和不使用引号。

webpack v 1.13.1 webpack-dev-server v 1.14.1 装载机v 2.2.3

Answer 1

我也面临着相同的相对路径问题。在选项中添加路径可以解决该问题。

 {
      loader: require.resolve('less-loader'),
      options: {
          importLoaders: 1,
          paths: [path.resolve(__dirname, "node_modules")],

      },
  }

Less-Loader：导入URL被视为相对URL，不传递--relative-url选项

1 个答案: