CSS加载器URL根不修改URL

Question

我有我的webpack.config像这样：

module: { 
    rules: [ 
     { 
      test: /\.css$/, 
      use: ExtractTextPlugin.extract({ 
       fallback: 'style-loader', 
       use: { loader: 'css-loader', options: { url: false, root: 'http://localhost:9000/' } } 
      }), 
      exclude: /node_modules/ 
     } 
    ] 
}, 

读css-loader options documentation它说：

如果根查询参数设置，但是，这将是预先附加到URL然后翻译。

如果我的CSS看起来像这样：

select-page { 
    background-image: url('assets/background.png') !important; 
} 

我期望的输出url是'http://localhost/9000/assets/background.png'。

但是，这不是我所得到的，当我运行构建时没有改变。

Answer 1

尝试更改webpack配置文件。并检查资产文件夹应下提出的src文件夹

select-page { 
    background-image: url('assets/background.png') !important; 
} 

module: { 
    rules: [ 
      { 
       test: /\.css$/, 
       use: ['style-loader','css-loader'], 
      }, 
      { 
      test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, 
      use: [ 
       { 
        loader: 'file-loader?name=assets/[name].[ext]', 
       } 
      ] 
      } 
     ] 
}, 

Answer 2

因此，为了得到这个工作，我需要确保我设置{ url: true }或刚刚离开了那个关键，因为它默认为true。

但后来因为我拉我的资产，通过我在CSS设置资产相对URL后file-loader他们感动：

.select-page { 
    background-image: url('/assets/background.png') !important; 
} 

这就带来了一个新的问题，与{ url: true }这意味着css-loader是要试图解决它 - 但它不能因为不存在的文件有.....

所以我也必须使用{ alias: { } }像这样：

{ 
    test: /\.css$/, 
    use: ExtractTextPlugin.extract({ 
     fallback: 'style-loader', 
     use: { 
      loader: 'css-loader', 
      options: { 
       root: 'http://localhost:8080/', 
       alias: { 
        './assets': path.resolve(__dirname, './resources/images') 
       } 
      } 
     } 
    }), 
    exclude: /node_modules/ 
} 

这意味着当css-loader尝试解析url将换出/assets与path.resolve(__dirname, './resources/images')这实际上是在资源所在。但它不会影响原始url。

还有就是为什么在alias关键是用./前缀，因为它不只是一个/工作的原因，我认为这是因为css-loader总会preprend一个/与.它继续处理之前url。

然后{ root: '' }被前置到它，所以我得到我想要的输出：

.select-page { 
    background-image:url("http://localhost:8080/assets/background.png") 
} 

这似乎并不理想，我 - 也许这只是因为我的工作流程略有不同！