目前我正在使用webpack 5、react 17和@dr.pogodin/babel-plugin-react-css-modules以及所有其他最新软件包。
我排除了资产/样式表中的sass/css文件,这些文件被视为全局文件,并在className中使用这些类
将localIdentName更改为其他内容时不会应用样式。我试过了,但没用。
Github回购链接
那么如何更改localIdentName呢?
package.json
{
"name": "react-app",
"version": "1.0.0",
"description": "React Template App",
"author": "",
"license": "ISC",
"main": "index.js",
"scripts": {
"start": "webpack serve --mode development",
"build": "webpack --mode production"
},
"dependencies": {
"date-fns": "^2.16.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
},
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"@dr.pogodin/babel-plugin-react-css-modules": "^6.0.10",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2",
"css-loader": "^5.0.1",
"html-webpack-plugin": "^5.0.0-beta.1",
"mini-css-extract-plugin": "^1.3.3",
"node-sass": "^5.0.0",
"postcss": "^8.2.1",
"postcss-scss": "^3.0.4",
"sass": "^1.30.0",
"sass-loader": "^10.1.0",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1",
"webpack": "^5.11.0",
"webpack-cli": "^4.3.0",
"webpack-dev-server": "^3.11.0"
}
}
webpack.config.js
常量路径=需要(路径);
const HtmlWebpackPlugin=require(“html网页包插件”);const MiniCssExtractPlugin=require(“迷你css提取插件”);
const isDev=process.env.NODE_env==“开发”;
log(环境:${isDev?“开发”:“生产”}
);
module.exports = {
entry: "./index.js",
mode: isDev ? "development" : "production",
output: {
path: path.join(__dirname, "dist"),
publicPath: "/",
filename: "bundle.js",
},
devServer: {
compress: true,
open: true,
hot: true,
historyApiFallback: true,
quiet: false,
stats: "errors-warnings",
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
{
test: /\.(css|sass|scss|less)$/,
use: [
isDev ? "style-loader" : MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
modules: {
auto: (resourcePath) =>
resourcePath.indexOf("assets/stylesheets") === -1,
localIdentName: "[path]___[name]__[local]___[hash:base64:5]",
// getLocalIdent: (context, localIdentName, localName, options) => {
// return "whatever_random_class_name";
// },
},
sourceMap: isDev,
},
},
"sass-loader"
],
}
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./public/index.html",
filename: "./index.html",
favicon: "./public/favicon.ico",
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css",
})
],
devtool: isDev ? "source-map" : false,
};
B.法律改革委员会
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
[
"@dr.pogodin/babel-plugin-react-css-modules",
{
"webpackHotModuleReloading": true,
"autoResolveMultipleImports": true,
"filetypes": {
".scss": {
"syntax": "postcss-scss"
}
}
}
]
]
}
听起来好像我忘了告诉你Babel-plugin-react-css-模块
也有一个配置作用域名称的选项,称为GenerateScopedName
。
只要您将其配置为与css加载程序相同,它就应该可以工作:
.babelrc
[
"@dr.pogodin/babel-plugin-react-css-modules",
{
"generateScopedName": "[name]__[local]___[hash:base64:5]", // switch to whatever you want to
// ...
}
]
webpack.config.js
:{
loader: "css-loader",
options: {
modules: {
// ...
localIdentName: "[name]__[local]___[hash:base64:5]",
},
},
},
注意:在基于env生成的情况下,您应该使用js babel config filebabel.config.js
,这样您就可以通过NODE_env
问题内容: 在IE10中,此代码无法正常工作: 应该发生的是,该宽度应为31px,并占用内的其余可用空间。由于某种原因,发生的事情只是默认为263px。 在Chrome和Firefox中可以正常运行。 问题答案: IE尚不完全支持Flex布局模式。IE10实现了规范的“补间”版本,该版本不是完全最新的,但仍然可以使用。
问题内容: 我尝试阅读有关如何处理IE中自定义字体的多篇文章,但是它们似乎对我没有用。我尝试将字体转换为,但这似乎也不起作用。我不确定自己在做什么错,所以我将发布我的代码 问题答案: 这在ie8 / 9中有效
问题内容: 我将datepicker附加到全局脚本文件中的输入中,如下所示: 在特定页面上,模态对话框(还有jquery ui)中有输入(将与datepicker一起使用),我通过$ .load()调用该页面并注入其他页面的div中。 上面的代码对于其他页面中的静态输入非常有效,但对于上面的scenerio,它显示的是datepicker对话框很好,但是当我单击一个日期时,它会抛出错误(f未定义)
我谷歌了很多,这是真的奇怪的Spring Boot(最新版本)可能没有懒惰加载是不工作的。以下是我的代码片段: 我的资源: 我的服务: 编辑2: 对于规范构建,我有:
问题内容: 我动态加载CSS样式表(在jQuery的帮助下),如下所示: 这在Firefox和Google Chrome浏览器中工作正常,但在IE中则 不能 。 有什么帮助吗?谢谢 问题答案: IE处理完页面加载的所有样式后,添加另一种样式表的唯一可靠方法是 有关更多详细信息。
HTML格式 我没有这个的id或名称。因此我写 但click()没有发生。 已尝试driver . find element(by . CSS selector("。按钮[值=搜索]”)。单击(); 尝试值='Search '(单引号)。 这些选择器正在