Question

我正在尝试在构建项目时为背景图像输出不同的URL。

我当前的CSS图片路径是：

./src/components/assets/images....

构建时我想要的是什么：

/images/default-source/images/icon.png

我尝试了css-loader中的各种选项，但没有一项能够奏效。通常，它会在运行项目时导致问题，因为它无法找到图像。

目录：

/build/main.css
/src/components/assets/css/main.css
/src/components/assets/images/

/webpack.config.js

{
  test: /\.scss$/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      { 
        loader: 'css-loader',
        options: { 
          url: false ,
        }
      },
      { 
        loader: 'postcss-loader' 
      },
      { 
        loader: 'sass-loader',
      },
    ],
  }),
},

我想过在构建过程中可能会使用某种查找和替换。什么是最好的解决方案？

Answer 1

尝试在您的webpack.config.js上或在构建应用期间添加此内容

npm run build --output-public-path='/images/default-source/'

不确定webpack 3是否仍然接受未测试，问候

在Webpack 3中，如何在构建时生成不同的CSS URL？

1 个答案: