reactjs - 如何使用带有 CSS 模块的 Webpack 4 摇树移除未使用的类?
问题描述
有人做了一个很好的例子,根据是否使用 JS 模块来删除未使用的 CSS,但我试图弄清楚如何从组件中实际未使用的包中删除未使用的 CSS 类。
例子
// Sub.scss
.sub-container {
background-color: green;
}
.unused-junk {
color: blue;
}
// Sub.js
import React from "react";
import styles from "./Sub.scss";
export default function Sub() {
return <div className={styles.subContainer}>Hi from sub.</div>;
}
// App.scss
.app-container {
background-color: red;
}
// App.js
import React from "react";
import ReactDOM from "react-dom";
import Sub from "./Sub";
import styles from "./App.scss";
function App() {
return (
<div className={styles.appContainer}>
Hi from app.
<Sub />
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
// webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
module.exports = {
entry: "./src/App.js",
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.js/,
loader: "babel-loader",
include: __dirname + "/src",
query: {
presets: ["react"]
}
},
{
test: /\.scss/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
modules: true,
camelCase: true,
importLoaders: 1,
localIdentName: "[name]--[local]--[hash:base64:5]"
}
},
"sass-loader"
],
include: __dirname + "/src"
}
]
},
plugins: [
new CopyWebpackPlugin([{ from: `src/index.html`, to: "index.html" }]),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
};
// CSS bundle
.App--app-container--3wd6W {
background-color: red; }
.Sub--sub-container--38uqh {
background-color: green; }
.Sub--unused-junk--2-h5r {
color: blue; }
有没有办法.unused-junk
从捆绑包中摇树类?
解决方案
推荐阅读
- oracle - 如何在sql中查找患者订购的药物之间的差距?
- python - python --version 在 Windows 命令提示符下不起作用但已安装
- javascript - 屏幕调整大小后在 JavaScript 中返回完全相同的图像坐标
- asp.net - 在asp.net中将字节转换为图像时显示[object Object]的图像位置
- php - Laravel 的反向链接
- javascript - Javascript indexOf 不能处理一些带有文本和数字的值
- keyboard - 不能在西班牙语布局的美式键盘上使用 > / < 键
- php - 如何使用 PHP 模型视图控制器发出 AJAX POST 请求?
- typescript - 打字稿类型保护数组查找需要在查找之前进行过滤
- c++ - 是否有类似 Rust 的 core::hint::spin_loop for C++ 的东西?