在JavaScript/TypeScript文件中使用[hash:base64:5]。
我正在使用WebPack的Angular项目中使用CSS模块. 我已经用.css和.scss文件中的类名称使用 postcss-modules . 然后使用 posthtml-css-modules 我已经改变了类属性的值在HTML元素中,其哈希值由postcss-modules定义. 定义 我可以说一切正常. 现在,我有一个新的挑战要解决. Angular,具有一个功能,可以使您在HTML元素中动态更改class的值,具体取决于条件: https://angular.io/api/api/common/common/ngclass 例如,我可以做: 如果myVar = true,HTML元素将是: ,如果myVar = false,则HTML元素将是:
0 2024-02-21
编程技术问答社区
如何在基于React的Wordpress插件中使用CSS模块?
我在我的tsx文件之一中有这条线: import styles from "../../styles/buyTicket.module.css"; 有一个错误: ERROR in /Applications/MAMP/htdocs/wp-content/plugins/tikex/tikexModule/components/BuyTicket/PricingOptionInvoiceItemsFormFieldsCheckboxes.tsx ./tikexModule/components/BuyTicket/PricingOptionInvoiceItemsFormFieldsCheckboxes.tsx 7:19-54 [tsl] ERROR in /Applications/MAMP/htdocs/wp-content/plugins/tikex/tikexModule/components/BuyTicket/PricingOptionInvoiceItemsF
2 2023-12-12
编程技术问答社区
未预期的字符'@' 你可能需要一个适当的加载器来处理这种文件类型。
这是我尝试运行webpack时得到的:我遇到的错误是: " ./v3/app/styles/main.scss中的错误 模块解析失败:/USERS/VOVINA/widget-Login-react/v3/app/styles/main.scss意外角色'@'(1:0) 您可能需要适当的加载程序来处理此文件类型." 它无法解决,对此有什么想法? 我的webpack配置如下: const childProcess = require('child_process') const CopyWebpackPlugin = require('copy-webpack-plugin') const ExtractTextPlugin = require('extract-text-webpack-plugin') const trimEnd = require('lodash/trimEnd') const webpack = req
2 2023-12-01
编程技术问答社区
CSS模块和多个布局/主题?
在我的应用程序中,我有多种主题样式(您可以将它们视为不同的,独立的CSS样式文件).我想开始使用CSS模块,但我甚至不知道如何import我的第一个文件. 让我们假设以下(简单)目录结构: layouts/ themeA/ myComponent.css themeB/ myComponent.css themeC/ myComponent.css components/ myComponent.js 根据用户设置,我想选择其他CSS.这很容易在浏览器(或服务器上)进行.但是,如何将myComponent.css包含在mycomponent.js中? 根据CSS模块,我应该import我正在使用的文件.所以import styles from 'theme/myComponent.css.问题是我没有一个真实的主题,而是3个不同的平行主题. import styles from '
14 2023-12-01
编程技术问答社区
Gatsby with PostCSS 8-尝试导入错误:'component.module.css'不包含默认导出(作为'style'导入)。
我有一个基于入门项目的盖茨比和理智网站.到目前为止,一切都很好,但是我今天在包装文件中更新了所有包装和插件.JSON文件以摆脱所有NPM警告.这包括更新到Gatsby 3.0.3和PostCSS 8(我现在也使用Gatsby-Plugin-Postcss 4.0.0). 我设法处理了一些初始错误,但是现在我遇到了一个问题,而它没有识别我的CSS模块.我会收到每个组件文件的错误: 尝试导入错误:'[componentName] .module.css'不包含默认导出(导入为"样式") ,当我在React组件中导入CSS文件 import styles from './[componentName].module.css' 样式对象返回未定义.我需要降级到其中一些软件包的较旧版本吗? 这是我的软件包. "dependencies": { "@cloudflare/wrangler": "^1.15.0", "@fontsource/mo
12 2023-12-01
编程技术问答社区
在 CSS 模块中使用 SCSS 变量
我有一个_color.scss文件,该文件包含400个颜色作为变量.而且我喜欢20个组件,它们需要这种颜色变量的样式. 我正在使用SCSS + CSS模块来构建样式.截至目前,我在每个组件的style.scss中导入此_color.scss. 示例: component1.scss @import "color.scss"; component2.scss @import "color.scss"; component3.scss @import "color.scss"; 以前,当我使用SCSS独立时,我会将color.scss导入到我的index.scss上,并导入下面的所有其他样式.这样,变量将在所有组件中可用. 示例: //index.scss @import "color.scss"; @import "component1.scss"; @import "component2.scss"; @import "comp
2 2023-12-01
编程技术问答社区
没有找到Flow模块和.scss文件
我有一个使用SCSS的文件,例如So: import styles from './Login.scss'; webpack构建工作正常,但我遇到了流动错误:Required Module Not Found 在我的.flowconfig中我有 [ignore] .*/node_modules/fbjs/.* .*/app/main.js .*/app/dist/.* .*/release/.* .*/git/.* [include] [libs] [options] esproposal.class_static_fields=enable esproposal.class_instance_fields=enable esproposal.export_star_as=enable module.name_mapper.extension='css' -> '/flow/CSSModule.js.flow' module.na
6 2023-12-01
编程技术问答社区
css-loader localIdentName:唯一性是否需要哈希值?
css-loader readme 建议localIdentName设置为 '[path][name]__[local]--[hash:base64:5]' 哈希后缀是必需的吗?它仍然是唯一的吗? '[path][name]__[local]' 为什么或为什么不呢? #3是此 解决方案 localIdentName与modules一起使用: { loader: 'css-loader', options: { modules: true, localIdentName: '[path][name]__[local]--[hash:base64:5]' } } 它生成较长的类名称: .src-styles-main__world-grid--R7u-K --------------- ---------- ----- path,name local hash .src-styles
6 2023-12-01
编程技术问答社区
在 Webpack 中使用 CSS 模块实现语义 UI
我有 import 'semantic-ui-css/semantic.min.css'在index.js中,在我做yarn eject之前(要使用create-react-app启用CSS模块)一切都很好,但是一旦我做到了,我就会收到以下错误: 找不到模块:无法解析'主题/默认/fonts/icons.eot'in'[my_project_dir]/node_modules/smantic-ui-css' 我认为WebPack的加载程序不处理字体文件可能是一个问题,因此我发现了这一点: { test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/, loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]' } 我将其添加到rules阵列中的webpack.config.dev.js(eslint加载器之后,在大型加载器之前,与其他所有内容都没有更改. 解决
0 2023-12-01
编程技术问答社区
用于反应 CSS 模块的多个 CSS 文件
我有2个相同的组件,这些组件的样式有些不同,所以我想重复使用常见样式,但不想为它们使用全局CSS,我该如何实现? import React from 'react'; import commonStylesfrom '../common/table.css'; import styles from '../uniquesStyles.css'; export default class Table extends React.Component { render () { return A0 B0
0 2023-12-01
编程技术问答社区
如何在 CSS 模块中使用全局变量?
我正在忙于学习与CSS模型的反应,我不太了解一个人会如何存储变量?例如,在Sass中,您可以这样做: // _variables.scss $primary-color: #f1f1f1; // heading.scss @import './variables'; .heading { color: $primary-color } 您如何在CSS模块中实现此目标? 解决方案 一种方法可能是使用依赖项.例如, // variables.css .primaryColor { color: #f1f1f1 } // heading.css .heading { composes: primaryColor from "./variables.css" } 在此处查看更多详细信息: CSS-MODULES#依赖项 如果您正在使用webpack,这里还有更多示例: https://github.com/webpack/css-loader#
8 2023-12-01
编程技术问答社区
如何修复 css 文件上的 typescript 编译器错误?
我正在尝试使用WebPack创建一个用打字稿创建一个React项目.但是我无法设法使CSS模块有效.尝试在打字稿中导入CSS文件时,我会遇到此错误: ERROR in src/components/Button.module.css:1:0 [unknown]: Parsing error: Declaration or statement expected. > 1 | .myButton { 2 | box-shadow: 0px 0px 0px -1px #1c1b18; 3 | background:linear-gradient(to bottom, #eae0c2 5%, #ccc2a6 100%); 4 | background-color:#eae0c2; ℹ 「wdm」: Failed to compile. 对我来说,这看起来WebPack期望CSS文件包含有效的打字稿,但我不确定.
4 2023-12-01
编程技术问答社区
如何使用 Typescript、React 和 Webpack 导入 CSS 模块
如何使用WebPack在打字稿中导入CSS模块? 为CSS生成(或自动生成).d.ts文件?并使用经典的打字稿import语句? ./styles.css.d.ts: import * as styles from './styles.css' 使用require webpack函数导入? let styles = require("./styles.css"); 但是,对于最后的方法,我必须定义require函数. 什么是最佳方法或最佳选择,也可以处理CSS文件定义和类的IntelliSense? 解决方案 现在在2021年,您需要做的就是用这些行添加src/Globals.d.ts: declare module "*.module.css"; declare module "*.module.scss"; // and so on for whatever flavor of css you're using 然后安装并添加
4 2023-12-01
编程技术问答社区
如何在Nextjs中对CSS类名进行哈希处理?
如何在nextjs中的webpack配置中编辑localIdentName css-loader字段,以便我可以hash/hida/obfuscate css类名称? 下面的示例来自《纽约时报》.注意类名: 解决方案 不幸的是,在Nextjs中没有支持将自定义配置传递给Webpack加载程序.但是我们可以使用next.config.js. 来解决它 首先,在项目目录的根部创建next.config.js 对于NextJS 11 module.exports = { webpack(config, { buildId, dev, isServer, defaultLoaders, webpack }) { config.module.rules[3].oneOf.forEach((moduleLoader, i) => { Array.isArray(moduleLoader.use) && moduleLoader.u
2 2023-12-01
编程技术问答社区
不能导入CSS/SCSS模块。TypeScript说 "无法找到模块"
我正在尝试从CSS模块导入主题,但是Typescript给我一个"找不到模块"错误,并且主题未应用于运行时.我认为我的webpack配置有问题,但我不确定问题所在. 我正在使用以下工具: "typescript": "^2.0.3" "webpack": "2.1.0-beta.25" "webpack-dev-server": "^2.1.0-beta.9" "react": "^15.4.0-rc.4" "react-toolbox": "^1.2.3" "node-sass": "^3.10.1" "style-loader": "^0.13.1" "css-loader": "^0.25.0" "sass-loader": "^4.0.2" "sass-lint": "^1.9.1" "sasslint-webpack-plugin": "^1.0.4" 这是我的webpack.config.js var path = require('path'); va
12 2023-12-01
编程技术问答社区
如何与NUXT正确导入CSS模型?
我正在使用NUXT的CSS模块,并且在尝试在JS中导入样式表时遇到了一些问题.如果我将样式表直接导入... @import './index.css'; ...一切都按预期工作.在我的特殊情况下,我需要运行一个计算的属性以在两个不同的样式表之间进行选择,因此我不需要通过导入,我需要导入到中并实现类似的样式: import foo from './index.css' export default { computed: { styles() { return foo } } } 在Vue上实施此操作时,一切都很好,我会返回样式对象.但是,nuxt正在返回一个空的对象,我的样式都没有正确地呈现. 我在我的nuxt.config.js文件中激活CSS模块: export default {
2 2023-11-26
编程技术问答社区
React、Emmet、Visual Studio Code 和 CSS 模块
是否有一种方法可以在Visual Studio代码中配置Emmet以使用React的CSS模块? 当我输入... div.container并命中标签时,它变成 这里的问题是它不使用CSS模块.我想成为这个: 有没有办法在VS代码中获取此功能? 解决方案 是的,您可以做到,但是我认为您必须创建自己的片段.来自VSCODE文档: 在Mac上:代码 - >首选项 - >用户摘要,并将其调用您想要的任何内容 打开摘要文件时,请对此进行查看: { "For_Loop": { "prefix": "for", "scope": "javascript,typescript", "body": [ "for (const ${2:ele
4 2023-11-24
编程技术问答社区
CSS网格和CSS模块的VS代码和Intellisense
我正在使用CSS网格和CSS模块使用VS代码.但是,当我尝试这样的事情 .loginRegisterDiv { composes: loginDiv; margin: 0px; width: 100%; } 我遇到一个错误,说组成的"未知属性".另外,我正在使用CSS网格,并且在VS代码中似乎没有任何Intellisense.我需要安装扩展名吗? 我正在使用RallyCoding规则集. 解决方案 这对我有用,在您的settings.json文件中添加"css.lint.validProperties": ["composes"], 其他解决方案 您可以将其添加到VSC CSS Linter中,为规则css.lint.unknownProperties添加一个例外(或将其设置为忽略).打开VSC设置,搜索css.lint.validProperties并将" copts"添加到列表中.错误/警告将消失. 其他解决方案 我使用扩展来帮助解
10 2023-11-24
编程技术问答社区
ts-loader/css-loader无法导入/解决文件
尝试使用Style-Loader和CSS-Loader添加CSS模块.很难弄清楚这一点.我也不确定是要怪还是CSS-loader. webpack.config.js const path = require('path'); module.exports = env => { return { devtool: "inline-source-map", entry: "./src/index.tsx", output: { path: path.resolve(__dirname, "/public"), filename: "build/app.js" }, resolve: { extensions: [".ts", ".tsx", ".js", ".json"], }, mod
24 2023-11-01
编程技术问答社区
使用 Selenium 的 CSS 模块?
我正在使用React/Redux和CSS模块来处理Web应用程序.对于单位测试,我正在使用 Identity-obj-proxy 嘲笑我的CSS Imports. 但是,质量保证团队想知道如何在使用硒时如何进行混淆的班级名称(我完全不熟悉自己).我能够找到是这个问题,但是QA尚不清楚接受的答案. 在这种情况下使用硒的有哪些解决方案(最好是我可以与QA团队一起使用的易于理解的答案)? 解决方案 有多种处理方法,如有记录这里. 我最终在我们的开发环境的WebPack配置中关闭CSS哈希(通过localIdentName选项, css loader ). 例如,localIdentName=[name]__[local]而不是默认localIdentName=[hash:base64]. 其他解决方案 我创建了Webpack插件 webpack-cssmap-plugin .它允许创建JSON文件,并在原始类和混淆的类名称之间进行映射.因此,可能不会在您