【问题标题】:Less-Loader: Import URLs are being treated as relative URLs, without the --relative-url option being passedLess-Loader:导入 URL 被视为相对 URL,没有传递 --relative-url 选项
【发布时间】:2016-10-12 19:20:15
【问题描述】:

我正在尝试使用 less-loader 加载一个在顶部带有 url 导入的 less 文件。此 url 导入适用于在其他地方(在 cdn 上)托管的文件。

app.less

@import url("http://cdn-name/mixins.less");

当我尝试使用 less-loader 加载这个 less 文件时,我收到以下错误:

ERROR in ./~/css-loader!./~/less-loader!./static-content/less/app.less
Module build failed: Cannot resolve 'file' or 'directory' ./http://cdn-name/mixins.less 

似乎 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

【问题讨论】:

    标签: webpack less webpack-dev-server


    【解决方案1】:

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

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

    【讨论】:

      猜你喜欢
      • 2017-05-09
      • 1970-01-01
      • 2012-02-16
      • 1970-01-01
      • 2017-10-27
      • 1970-01-01
      • 1970-01-01
      • 2018-08-03
      • 1970-01-01
      相关资源
      最近更新 更多