Webpack 2與錯誤的字體和圖像路徑的CSS

我的WebPack2的配置有問題，因爲它將字體和圖像放在我想要的目錄中，但它使得CSS URL指向另一個目錄。Webpack 2與錯誤的字體和圖像路徑的CSS

我原來的CSS（SASS通過羅盤編譯後）和字體具有以下結構

的字體面在這裏是正確的：

@font-face { 
font-family: 'FS Albert Web Regular'; 
src: url("../fonts/FSAlbertWeb-Regular.eot"); 
src: url("../fonts/FSAlbertWeb-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/FSAlbertWeb-Regular.woff2") format("woff2"), url("../fonts/FSAlbertWeb-Regular.woff") format("woff"); 
font-weight: normal; 
font-style: normal; 
} 
. 
. 
.

，我需要的JavaScript我的CSS是定位d這裏

並具有CSS要求：

require("../../css/app.css");

我的WebPack配置是這樣的

var PRODUCTION = process.env.NODE_ENV === "production"; 

const cssIdentifier = PRODUCTION 
    ? '[hash:base64:10]' 
    : '[path][name]--[local]'; 

const cssLoader = PRODUCTION 
    ? ExtractTextPlugin.extract({ 
     fallback: "style-loader", 
     publicPath: "", 
     use: 'css-loader?localIdentName=' + cssIdentifier 
    }) 
    : [ 
     { loader: 'style-loader' }, 
     { 
      loader: 'css-loader?localIdentName=' + cssIdentifier, 
      options: { sourceMap: true } 
     } 
    ]; 

module.exports = { 
    entry: { 
     "header": './assets/campus/common/js/_deployment/header.js' 
    }, 
    output: { 
     path: path.resolve(__dirname, './assets/dist'), 
     publicPath: '/assets/dist', 
     filename: '[name].bundle.js', 
     chunkFilename: "[name].commons.js" 
    }, 
    module: { 
     rules: [ 
     { 
      test: /\.vue$/, 
      loader: 'vue-loader', 
      options: { 
       // vue-loader options go here 
      } 
     }, 
     { 
      test: /\.js$/, 
      loader: 'babel-loader', 
      exclude: /node_modules/ 
     }, 
     { 
      test: /\.(eot|svg|ttf|woff|woff2)$/, 
      loader: 'file-loader', 
      options: { 
       name: './font/[name].[ext]' 
      }, 
      exclude: /node_modules/ 
     }, 
     { 
      test: /\.(png|jpg|gif|svg)$/, 
      loader: 'file-loader', 
      options: { 
       name: './img/[name].[ext]?[hash]' 
      } 
     }, 
     { 
      test: /\.css$/, 
      use: cssLoader 
     } 
    ] 
}

我的文件被複制，我想他們：

但是我的字體（我的圖片）現在有一個錯誤的網址（不上去的水平結構）

@font-face{ 
    font-family:FS Albert Web Regular; 
    src:url(./font/FSAlbertWeb-Regular.eot); 
    src:url(./font/FSAlbertWeb-Regular.eot?#iefix) format("embedded-opentype"),url(./font/FSAlbertWeb-Regular.woff2) format("woff2"),url(./font/FSAlbertWeb-Regular.woff) format("woff"); 
    font-weight:400; 
    font-style:normal}

我在做什麼錯？

感謝您的幫助

來源

2017-03-06 CodeHacker

萬一有人在它絆倒.... 我不得不把

publicPath: ""

我cssloader的

改變

publicPath: '/assets/dist'

來源

2017-03-21 16:00:58 CodeHacker

Webpack 2與錯誤的字體和圖像路徑的CSS

回答

相關問題