如何在带有 webpack / postcss 的子目录中导入所有 CSS 文件@import '../组件/**/_partial.css';

Question

使用Webpack和PostCSS环境，我想导入Components文件夹和子目录中的所有CSS文件。我已经尝试了两个PostCSS插件postpass轻松导入&postcss导入并知道它们都需要放在第一位。具有直接路径的常规导入有效，可能是**占位符不起作用吗？

提前感谢

Answer 1

导入css或scss文件的最佳做法是将所有css文件或组件导入一个main.css或scss中。然后在你的条目*.js文件中导入该文件，最后在你的webpack配置文件中设置*.js作为一个条目。

例如，如果您有一个名为SampleProject的文件夹，并且文件夹和文件结构如下：

SampleProject
|
|--css
|  |--components
|  |  |--style1.css
|  |  |--style2.css
|  |  |--style3.css
|
|--js
|  |--components
|  |  |--script1.js
|  |  |--script2.js
|
main.css
index.js
index.html
webpack.prod.js
package.json

然后你可以在你的main.css文件中导入所有3种风格的文件，如下所示：

main.css

@import 'css/components/style1.css';
@import 'css/components/style2.css';
@import 'css/components/style3.css';

然后，您可以将main.css文件导入到index.js中，并使用其他js块，如

index.js

import './main.css';
import 'js/components/script1.js';
import 'js/components/script2.js';

最后，您可以使用这个index.js作为webpack配置文件的入口点，如下所示：

webpack.prod.js:

const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
entry: {
main: './index.js'
},
output: {
path: path.join(__dirname, './build'), 
filename: '[name].[chunkhash:8].bundle.js',
chunkFilename: '[name].[chunkhash:8].chunk.js',
},
mode: 'production',
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader', 
},
},
{
test: /.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', 
'postcss-loader', 
//'sass-loader',
],
},
{
test: /.(png|svg|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader', 
options: {
name: '[name].[ext]',
outputPath: 'assets/img',
esModule: false,
},
},
],
},
{
test: /.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: 'file-loader', 
options: {
name: '[name].[ext]',
outputPath: 'assets/font',
},
},
],
},
{
test: /.html$/i,
use: {
loader: 'html-loader',
options: {
attributes: {
list: [
{
tag: 'img',
attribute: 'src',
type: 'src',
},
{
tag: 'img',
attribute: 'srcset',
type: 'srcset',
},
{
tag: 'img',
attribute: 'data-src',
type: 'src',
},
{
tag: 'img',
attribute: 'data-srcset',
type: 'srcset',
},
],
},
},
},
},
],
},
optimization: {
minimizer: [new TerserJSPlugin(), new OptimizeCSSAssetsPlugin()],
splitChunks: {
cacheGroups: {
commons: {
test: /[\/]node_modules[\/]/,
name: 'vendors',
chunks: 'all',
},
},
chunks: 'all',
},
runtimeChunk: {
name: 'runtime',
},
},
plugins: [
// load jQuery
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
}),
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: '[name].[chunkhash:8].bundle.css',
chunkFilename: '[name].[chunkhash:8].chunk.css',
}),
new HtmlWebpackPlugin({
chunks: ['main'],
template: 'index.html',
filename: 'index.html',
}),
],
};

MiniCssExtractPlugin将自动提取项目的所有样式，并将它们保存为项目根目录中build文件夹中的一个文件。