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.

你需要管的少，装载机产量为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'] 
    }) 
}

Webpack不会捆绑到CSS？

相关推荐