Question

我将更详细地解释。

--bootstrap
--config
--css
   -style.css
--fonts
--less
    - component
    - jquery-ui
    bootstrap.less
    overrides.less
    style.less
    variable-overrides.less
--node_modules
--templates
gruntfile.js
mytheme.info.yml
mytheme.libraries.yml
mytheme.theme
package.json
package-lock.json
services.yml

以上是我的webpack构建的配置设置。这适用于将CSS文件等资源嵌入我的index.html文件所需的路径。如下面的代码所示： -

    module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist/'),
    assetsSubDirectory: 'assets',
    assetsPublicPath: './',
    productionSourceMap: true,
  }
}

但是当看app.345e4523874bd70b2f24b4356d30ed9e.css时，webpack已经构建了所有构建图像和字体的路径，如下所示： -

<link href=./assets/css/app.345e4523874bd70b2f24b4356d30ed9e.css rel=stylesheet>

问题是我需要将所有与CSS相关的资产路径更改为../img或../ fonts。

我尝试了很多东西并在网上看了但似乎无法找到解决方案！？它必须如此简单。

这是我的文件夹结构。感谢

的CSS IMG JS 的index.html

Answer 1

通过将'publicPath'../'添加到

来解决这个问题

{
    test: /\.(jpg|png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]'),
      publicPath: '../'
    }
  },
  {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('fonts/[name].[hash:7].[ext]'),
      publicPath: '../'
    }

希望这有助于其他人

Webpack - 生产如何为css文件中的<link href =“”/>和图像路径启用不同的文件路径

1 个答案: