Webpack不會捆綁到CSS？

我嘗試了各種配置。我設法將我的jsx代碼編譯成一個捆綁的JS，所以這似乎工作。Webpack不會捆綁到CSS？

現在，我想我的捆綁.LESS文件到在/ wwwroot的一個捆綁的.css文件/

我試着在網上搜索顯示的3個不同來源1，他們」每一個源已經複製，但我可以不讓他們工作。

如何讓webpack捆綁我的少文件並將其捆綁到/ wwwroot /中的單個css文件？

我的文件結構：

/wwwroot/ /* wwwroot, public files*/ 
/Content/css/ /* .less files */ 
/Content/jsx/ /* .jsx files */

我的WebPack configruation：

"use strict"; 
var glob = require("glob"); 
const ExtractTextPlugin = require("extract-text-webpack-plugin"); 

module.exports = { 
    entry: { 
     app: glob.sync("./Content/*/*.jsx") 
    }, 
    output: { 
     filename: "./wwwroot/[name].min.js" 
    }, 
    devServer: { 
     contentBase: ".", 
     host: "localhost", 
     port: 9000 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       loader: "babel-loader" 
      }, 
      { 
       test: /\.less$/, 
       loader: ExtractTextPlugin.extract({ 
        use: "less-loader" 
       }) 
      } 
     ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin({ 
      filename: "./wwwroot/[name].min.css" 
     }), 
    ], 
};

這裏是輸出：

Version: webpack 2.5.1 
Time: 322ms 
       Asset  Size Chunks    Chunk Names 
./wwwroot/app.min.js 2.75 kB  0 [emitted] app 
    [0] ./Content/jsx/app.jsx 0 bytes {0} [built] 
    [1] multi ./Content/jsx/app.jsx 28 bytes {0} [built] 
Process terminated with code 0.

來源

2017-05-25 Perfection

你需要管的少，裝載機產量爲CSS-裝載機 –

@DovBenyominSohacheski我是新來的這些任務亞軍所以請你解釋一下？ – Perfection

目前，您的.less文件將被轉換爲CSS，但需要將其傳送到'css-loader'或類似的文件中才能觸發ExtractTextPlugin寫入磁盤。因此，而不是「use：」less-loader「'，它應該看起來像'use：[」css-loader「，」less-loader「]''。 – varbrad

添加fallback選項爲您ExtractTextPlugin，並css-loader在你的裝載機列表。如果你還沒有安裝style-loader和npm install --save-dev style-loader。

{ 
    test: /\.less$/, 
    use: ExtractTextPlugin.extract({ 
    fallback: 'style-loader', 
    use: ['css-loader', 'less-loader'] 
    }) 
}

來源

2017-05-29 09:11:01

Webpack不會捆綁到CSS？

回答

相關問題