webpack und weniger, wie man Bilder URL in css

Question

einfach mit meinem Webpack und weniger eingerichtet besten Weg, um URLs für Bilder in meinem CSS aufzunehmen und sie arbeiten in DEV und Build-Modus.

Folgende arbeitete in dev mit webpack-devserver aber nicht nach dem Build.

.login-container{ 
    height:100%; 
    width:100%; 
    background: url('../../images/home3.jpg') no-repeat center center fixed; 

Und in meiner Konfig.

plugins.push(
      new HtmlWebpackPlugin({ 
       template: './src/index.html', 
       inject: 'body' 
      }), 
      // Write out CSS bundle to its own file: 
      new ExtractTextPlugin({ 
       filename: 'css/styles.css', 
       allChunks: true}) 
     ); 

Auch

entry: { 
     app: './src/app/app.js' 
    }, 
    devServer: { 
     outputPath: path.join(__dirname, 'src'), 
     contentBase: "./src" 
    }, 
    output: { 
     path: path.resolve(__dirname, 'dist'), 
     publicPath: isProd ? '' : 'http://localhost:8080/', 
     filename: isProd ? 'js/[name].[hash].js' : 'js/[name].bundle.js', 
     chunkFilename: isProd ? 'js/[name].[hash].js' : 'js/[name].bundle.js' 
    }, 

In dev arbeitete es in Ordnung, aber nach dem Bauprozess es wurde versucht, die Bilder von meinem css Ordner

dh mysites/css/12424324234234234.jpg

zu laden anstelle von

ie mysites/12424324234234234.jpg wo die Bilder war wirklich.

Answer 1

Hier können Ihnen diese Lösungen helfen, die in den folgenden Github-Problemen veröffentlicht wurden.

Github Issues 1

Github Issues 2

Die Abhilfe für das Verfahren kann als diese

Die ExtractTextPlugin einen Dateinamen wie css/[name] .css behandeln muß durchgeführt werden. Als Workaround können Sie stattdessen [name] .css verwenden.

{ publicPath: '/' } eingestellt, so daß jede Referenz Wurzel relativ wird.

ODER

Sie können auch url-loader

Sie verwenden auch diese

code loaders: [ 
      { test: /\.css$/, loader: ExtractTextPlugin.extract(
       "style-loader", 
      "css-loader?sourceMap" 
      "css-loader?sourceMap", 
      { 
       publicPath: "../" 
      } 
      )}, 
      { test: /\.png$/, loader: "file-loader" } 
     ] 
    }, 
    plugins: [ 
    new ExtractTextPlugin("[name].css?[hash]-[chunkhash]-[name]", { 
    new ExtractTextPlugin("css/[name].css?[hash]-[chunkhash]-[name]", { 
      disable: false, 
      allChunks: true 
     }), 

von sokra veröffentlicht begangen überprüfen