WebPack如何将所有css文件放入一个css文件

本文介绍了WebPack如何将所有css文件放入一个css文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我对WebPack相当陌生，我希望能够获取一个CSS文件目录(.app/styles/[css文件...])并将其输出到一个CSS文件中(dist/styles.css)).

I am fairly new to WebPack, and I want to be able to take a directory of CSS files (.app/styles/[css files...]) and output them into one CSS file (dist/styles.css).

当前，所有JavaScript文件都被编译到一个单独的"index_bundle.js"文件中，这是完美的，但我想在CSS文件中实现相同的效果.

Currently, all the JavaScript files is compiled into one single "index_bundle.js" file, which is perfect, but I want to achieve the same for my CSS files.

经过大量的谷歌搜索"之后，我发现WebPack的ExtractTextPlugin应该能够帮助解决此问题，但这仅适用于添加到"entry"属性的一个CSS文件(例如:entry:{style:"./app/styles/style.css"})，然后将其作为链接标签添加到html的头部，这很好，但是我希望我所有的css文件都放入一个styles.css文件中，然后使用该文件在html头中作为链接.

After a lot of "Googling", I found that the ExtractTextPlugin for WebPack should be able to help with this, but this only works for one CSS file that is added to the "entry" property (eg: entry: {style: "./app/styles/style.css"}) which is then added to the html's head as a link tag, which is fine, but I want all my css files to go into one styles.css file and then use that in the html's head as a link.

我当前的WebPack配置如下:

My current WebPack config looks like this:

var HtmlWebpackPlugin = require('html-webpack-plugin'); var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({ template: __dirname + '/app/index.html', filename: 'index.html', inject: 'body' }); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var ExtractTextPluginConfig = new ExtractTextPlugin( "styles.css", { allChunks: false } ); module.exports = { entry: { index: "./app/index.js"//, //styles: "./app/styles/style1.css" // I don't want one file, I want to use a directory eg: "./app/styles/" }, output: { path: __dirname + '/dist', filename: 'index_bundle.js' }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }, { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") } ] }, plugins: [ HtmlWebpackPluginConfig, ExtractTextPluginConfig ] }

有人能指出我正确的方向吗?即使它是另一个插件或其他方法.任何帮助将不胜感激！

Can someone please point me in the right direction? Even if it is another plugin or a different approach. Any help will be greatly appreciated!

我的新WebPack配置看起来像这样:

My new WebPack config looks like this:

var HtmlWebpackPlugin = require('html-webpack-plugin'); var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({ template: __dirname + '/app/index.html', filename: 'index.html', inject: 'body' }); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var ExtractTextPluginConfig = new ExtractTextPlugin( "index_bundle.css" ); module.exports = { entry: [ './app/index.js', './app/index.css' ], output: { path: __dirname + '/dist', filename: 'index_bundle.js' }, module: { preloaders: [ { test: /\.css/, exclude: /styles/, loader: 'import-glob-loader' } ], loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }, { test: /styles\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }, { test: /\.json$/, loader: 'json' } ] }, devServer: { historyApiFallback: true }, plugins: [ HtmlWebpackPluginConfig, ExtractTextPluginConfig ] }

推荐答案

好，所以这似乎是骆驼案的问题.

Ok, so it seems to have been a camel-case problem.

借助 Davin Tryon ，我能够解决我的问题-谢谢！

With the help of Davin Tryon, I was able to resolve my issue - thanks!

如果您查看: www.npmjs/package/import-glob-loader 他们具有以下内容:

If you look at: www.npmjs/package/import-glob-loader they have the following:

preloaders: [{ test: /\.scss/, loader: 'import-glob-loader' }]

应该是:

preLoaders: [{ test: /\.scss/, loader: 'import-glob-loader' }]

所以最后，我的整个webpack.config.json看起来像这样:

So in the end, my whole webpack.config.json looks like this:

var HtmlWebpackPlugin = require('html-webpack-plugin'); var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({ template: __dirname + '/app/index.html', filename: 'index.html', inject: 'body' }); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var ExtractTextPluginConfig = new ExtractTextPlugin( "index_bundle.css" ); module.exports = { entry: [ './app/index.js', './app/index.css' ], output: { path: __dirname + '/dist', filename: 'index_bundle.js' }, module: { preLoaders: [ { test: /\.css$/, exclude: /styles/, loader: 'import-glob-loader' } ], loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }, { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }, { test: /\.json$/, loader: 'json' } ] }, devServer: { historyApiFallback: true }, plugins: [ HtmlWebpackPluginConfig, ExtractTextPluginConfig ] }

我的index.css文件如下:

And my index.css file looks like this:

@import './styles/**/*';

这对我有用，我得到了一个CSS输出文件"index_bundle.css".样式和脚本也会自动注入到html模板中.

This is working for me and I get a single css output file "index_bundle.css". The style and scripts also automatically gets injected into the html template.

index.html注入前:

index.html before injection:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Admin - Login</title> <link rel="stylesheet" href="maxcdn.bootstrapcdn/bootstrap/latest/css/bootstrap.min.css"/> </head> <body> <div id="app"></div> </body> </html>

index.html插入/dist文件夹后:

index.html after injection in /dist folder:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Admin - Login</title> <link rel="stylesheet" href="maxcdn.bootstrapcdn/bootstrap/latest/css/bootstrap.min.css"/> <link href="index_bundle.css" rel="stylesheet"></head> <body> <div id="app"></div> <script type="text/javascript" src="index_bundle.js"></script></body> </html>