javascript - 为什么我的样式表没有包含在 Webpack 构建中?
问题描述
Webpack 将文件(.css、.js)收集到一个库中,并在另一个 React 项目中使用它。尽管 .css 文件存在并且样式存在,但组件中指定的样式不会通过。
UiButton.jsx 文件
import styles from './UiButton.module.css';
const UiButton = () => {
return (
<>
<button className={styles.button}>Text</button>
</>
);
}
export default UiButton;
index.js 文件
import UiButton from './UiButton/UiButton';
import './index.css';
export { UiButton };
Webpack.config.js 文件
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: { main: './src/index.js' },
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js',
libraryTarget: "umd",
library: "uilibrarytest"
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: [ 'style-loader', MiniCssExtractPlugin.loader, 'css-loader' ]
}
]
},
plugins: [
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: 'index.css',
}),
// new HtmlWebpackPlugin({
// template: './public/index.html',
// }),
new webpack.ProvidePlugin({
"React": "react",
}),
],
resolve: {
extensions: ['.js', '.jsx'],
},
}
这是 webpack 构建的:
.button {
background: red;
}
html {
margin: 0;
padding: 0;
}
如何做到这一点,以便在使用给定库中的组件时,样式也被拉到它???
解决方案
Webpack 中的加载器是从右到左评估的。在您的配置中,评估顺序是“css-loader”、MiniCssExtractPlugin.loader,最后是“style-loader”。但 'style-loader' 只将样式注入 DOM。您需要 MiniCssExtractPlugin.loader 成为“使用”数组中的第一个元素。见下文...
{
test: /\.css$/,
use: [ MiniCssExtractPlugin.loader, 'css-loader' ]
}
此外,您可以告诉 webpack 在生产期间使用 MiniCssExtractPlugin.loader,而在其他时间使用“样式加载器”。
const isProduction = process.env.NODE_ENV == 'production';
const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : 'style-loader';
...other config
{
test: /\.css$/,
use: [ stylesHandler, 'css-loader' ]
}
在你的 package.json 脚本中,
"build": "webpack --mode=production --node-env=production"
推荐阅读
- javascript - 如何防止页面重新加载单击jQuery中的类
- python - 在 DataFrame 中的新标题下嵌套列
- arrays - 在 shell 脚本中计算浮点数的算术计算
- python - 如何动态定义 Dockerfile 中的参数并将其传递给下一步?
- stata - 如何在Stata“georoute”中使用HERE?
- c# - 使用 AutoFixture 构建组合数据
- ionic-framework - 无法从包中导入 pollfishplugin 变量
- javascript - 当我在 Highlighter 标签中使用 dangerouslySetInnerHTML 时,荧光笔不起作用
- r - 在 R 中使用 RNN(Keras)进行预测生成器
- c# - VS 扩展:当 Visual Studio 中的跟踪点被命中时是否会引发事件,并且可以在继续执行之前执行堆栈分析吗?