代码之家 › 专栏 › 技术社区 › Drazen Bjelovuk

webpack-css加载程序删除url()中的前导斜杠

react-app-rewired css-loader create-react-app webpack

0

Drazen Bjelovuk · 技术社区 · 3 年前

我在scss文件中设置了一个路径,指向我需要从域根引用的资源。问题是css加载程序在构建过程中删除了前导斜杠,即使使用了选项 { url: false } 。

url('/path/to/file') -> url('path/to/file')

你知道它为什么会这样做,以及如何避免吗?谢谢

编辑: 应该提到我正在使用 create-react-app 具有 react-app-rewired .我的配置:

// config-overrides.js

const { override, adjustStyleLoaders } = require('customize-cra');

module.exports = override(
  adjustStyleLoaders(({ use: [, css] }) => {
    css.options = { ...css.options, url: false };
  })
);

console.log 风格加载器的:

[
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/mini-css-extract-plugin/dist/loader.js',
    options: {}
  },
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/css-loader/dist/cjs.js',
    options: { importLoaders: 1, sourceMap: true, url: false }
  },
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/postcss-loader/src/index.js',
    options: { ident: 'postcss', plugins: [Function: plugins], sourceMap: true }
  }
]

[
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/mini-css-extract-plugin/dist/loader.js',
    options: {}
  },
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/css-loader/dist/cjs.js',
    options: {
      importLoaders: 1,
      sourceMap: true,
      modules: [Object],
      url: false
    }
  },
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/postcss-loader/src/index.js',
    options: { ident: 'postcss', plugins: [Function: plugins], sourceMap: true }
  }
]

[
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/mini-css-extract-plugin/dist/loader.js',
    options: {}
  },
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/css-loader/dist/cjs.js',
    options: { importLoaders: 3, sourceMap: true, url: false }
  },
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/postcss-loader/src/index.js',
    options: { ident: 'postcss', plugins: [Function: plugins], sourceMap: true }
  },
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/resolve-url-loader/index.js',
    options: {
      sourceMap: true,
      root: '/Users/323782896/Documents/Projects/ReactUI/src'
    }
  },
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/sass-loader/dist/cjs.js',
    options: { sourceMap: true }
  }
]

[
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/mini-css-extract-plugin/dist/loader.js',
    options: {}
  },
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/css-loader/dist/cjs.js',
    options: {
      importLoaders: 3,
      sourceMap: true,
      modules: [Object],
      url: false
    }
  },
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/postcss-loader/src/index.js',
    options: { ident: 'postcss', plugins: [Function: plugins], sourceMap: true }
  },
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/resolve-url-loader/index.js',
    options: {
      sourceMap: true,
      root: '/Users/323782896/Documents/Projects/ReactUI/src'
    }
  },
  {
    loader: '/Users/323782896/Documents/Projects/ReactUI/node_modules/sass-loader/dist/cjs.js',
    options: { sourceMap: true }
  }
]

可能是其他装载机中的一个负责吗?

0 回复 | 直到 3 年前

1

0

Drazen Bjelovuk 3 年前

原来是 resolve-url-loader ,特别是 root 为项目设置的选项 src CRA。

类似于css加载程序中的(现已失效)选项。此字符串(可能为空)的前缀为绝对URI。只有设置了此选项,才会处理绝对URI。

不确定这种情况是如何或何时发生变化的,但在升级到CRA v4后,这才成为我的一个问题。在任何情况下,以下调整(移除 root 选项)似乎起到了作用:

// config-overrides.js

const { override, adjustStyleLoaders } = require('customize-cra');

module.exports = override(
  adjustStyleLoaders(({ use: [miniExtract, css, postcss, resolveUrl, sass] }) => {
    css.options = { ...css.options, url: false };
    if (resolveUrl) {
      delete resolveUrl.options.root;
    }
  })
);