如何從CSS（背景等）包含圖像以使用webpack構建文件夾？

我試圖使用文件加載器來處理圖像，並將它們包含到我的構建文件夾中。如何從CSS（背景等）包含圖像以使用webpack構建文件夾？

圖片這是HTML文件內出現在建但不能風格的圖像。

我把我的WebPack配置分裂成2個文件和使用的WebPack合併模塊合併它們。

我這是怎麼配置的CSS處理：

exports.loadCSS = function (paths) { 
    return { 
     module: { 
      rules: [{ 
       test: /\.scss$/, 
       include: paths.app, 
       use: [ 
        'style-loader', 
        { 
         loader: 'css-loader', 
         options: { 
          root: paths.root 
         } 
        }, 
        'postcss-loader', 
        'sass-loader' 
       ] 
      }] 
     } 
    }; 
};

這是文件加載器配置：

  { 
       test: /\.(jpg|png|svg)$/, 
       loader: 'file-loader?name=[path][name].[hash].[ext]' 
      }

SCSS的海賊王：

.img-from-styles { 
    width: 100px; 
    height: 100px; 
    background: url('/imgs/imgInStyles.jpg'); 
}

這裏是包含完整project本身配置

來源

2017-04-22 Rantiev

您需要使用url-loader 安裝它

npm install url-loader --save-dev

如何使用它

{ 
    test: /\.(png|jpg|jpeg|gif)$/, 
    loader: 'url-loader?limit=10000' 
}

現在的WebPack將能夠從您的樣式解決您的網址

更新

的WebPack（CSS-裝載機）需要確切的文件路徑，以便它可以解決文件或URL你。

來源

2017-04-23 08:39:11

當我從資料瞭解，如果我們使用文件加載程序是相同的，以URL的裝載機。只有當我們談論小於限制設置的小文件時纔有區別。即使我們有超過10kb的文件，如果較少的圖像將作爲base64字符串包含在css本身中，url-loader將回退到文件加載器。所以我會嘗試這個，但不認爲它會解決問題。 – Rantiev

不行不行。你可以拉我的項目，看看你自己。 – Rantiev

@Rantiev我現在正在看你的項目。 –

如何從CSS（背景等）包含圖像以使用webpack構建文件夾？

回答

相關問題