css-modules 相关问题

CSS 模块可以与外部库一起使用吗？

我在我的 React 项目中使用 Slider 库 (https://react-slick.neostack.com/)。 当我使用常规 CSS 时，滑块可以正确设置样式，但是当使用 css 模块时，它不起作用。 tsx ...

在下一个js中从共享模块或节点模块中的文件导入css

我的设置： 我有一个单一存储库，其中包含来自共享模块的多个 NextJS 应用程序共享组件。应用程序和共享模块是由 npm 工作区管理的单独工作区。我正在使用 css 模块...

vitejs 将所有 .scss 文件视为 css 模块

我正在 monorepo 中使用旧包，并将其包含在 optimizationDeps 数组中 - 是否可以告诉 Vite 将其视为 CSS 模块文件的所有 .scss 文件？ 最初是在...

风格 v-html Vue 3

出于某种原因，这在 Vue 3 中有效，这在其他所有 SO 答案中均已弃用： .描述>>> p { 红色; 下边距：1rem； } 但我已经尝试了所有的排列...

Next.js 模块样式被 mui/material 样式覆盖

我目前正在使用 next.js 和 scss 模块进行样式设置。我遇到了一个关于 mui/material 组件的有趣的小问题。运行 dev (npm run dev) 时，一切都按预期工作。乐趣开始了...

Vite/Rollup 插件：如何将样式（CSS 模块）添加到 React Web 组件中

我正在尝试从 React 创建一个 Web 组件。 Web 组件需要您在 Shadow DOM 中导入样式。所以虽然我的 CSS 模块通常是这样导入的 从“./MyCom...

来自样式化组件时 CSS 模块中的动态 CSS

当我想从样式组件迁移到 CSS 模块时，出现了以下问题。 假设我有以下样式的组件，它接受动态参数偏移和动态...

NextJS 中 :global() css 模块选择器不纯的问题

所以我正在将应用程序从 CRA 迁移到 NextJS，并且我遇到了某些组件和页面的 .module.scss 文件的错误： 语法错误：选择器“:global(.label-primary)”不是...

css 模块保留原始类名 nextJS

next的输出生成一个classname_hash， 如何配置（通过 webpack）以便除了 classname_hash 之外它还保留原始类名？ 我还想...

开发和构建时如何更改Next.js v14 css模块中背景图像的路径

我正在使用 Next.js v14 创建一个具有附图中配置的页面。 在index.module.scss中，我使用图像作为背景。 下面是部分代码。 &::之前...

Nuxt 2 中使用 css 模块和 extractCSS 进行类复制

我将 nuxt 2 与 css 模块一起使用，当我将一个 css 模块与多个组件一起使用时，会导致多个 css 文件具有相同的类 你好.vue 我将 nuxt 2 与 css 模块一起使用，当我将一个 css 模块与多个组件一起使用时，会导致多个 css 文件具有相同的类 你好.vue <template> <div :class="$style.title">Hello, World</div> <div :class="$second.secondClass">Hello, World</div> </template> <script> export default {} </script> <style module src="./hello.css"></style> <style module="$second" src="./uncommon.css"></style> 再见.vue <template> <div :class="$style.title">Goodbye, World</div> <div :class="$second.secondClass">Goodbye, World</div> </template> <script> export default {} </script> <style module src="./goodbye.css"></style> <style module="$second" src="./uncommon.css"></style> 结果我有两个包含内容的文件 在两个文件中我有相同的类.YT3xv 我可以做点什么吗？在完美的情况下，我想在单独的文件中提取类似的类 您可以创建一个单独的 CSS 文件（例如，shared.css），在其中定义共享类。 我认为你的项目结构是这样的： - assets - css - shared.css - components - Hello.vue - Goodbye.vue - nuxt.config.js 在shared.css中，定义您的共享类： /* shared.css */ .sharedClass { /* styles */ } 在 nuxt.config.js 中，指定 extractCSS 选项以将 CSS 提取到单独的文件中： // nuxt.config.js export default { // other configurations build: { extractCSS: true } } 然后，在您的组件中，导入shared.css： <!-- Hello.vue --> <template> <div :class="$style.title">Hello, World</div> <div :class="$style.sharedClass">Hello, World</div> </template> <script> export default {} </script> <style module src="./hello.css"></style> <style src="~/assets/css/shared.css"></style> <!-- Goodbye.vue --> <template> <div :class="$style.title">Goodbye, World</div> <div :class="$style.sharedClass">Goodbye, World</div> </template> <script> export default {} </script> <style module src="./goodbye.css"></style> <style src="~/assets/css/shared.css"></style> 通过此设置，Nuxt.js 将在构建过程中自动将 shared.css 中定义的共享类提取到单独的 CSS 文件中。

NavigationBar 子菜单不可点击

我的 StackBlitz https://stackblitz.com/edit/vitejs-vite-39yyir?file=src%2Fcomponents%2FHeader%2FNavigationBar.jsx 问题。 子菜单不可点击。只要你移动鼠标，菜单就会弹出...

有没有更好的方法在React应用程序中使用CSS模块应用主题？

我在 React 应用程序中使用 CSS 模块作为样式解决方案，并且我有一个深色和浅色主题。目前，我使用这种方法根据当前主题设置组件的样式： 进口圣...

Next.js 构建无法编译（HookWebpackError：<css input>：61：1：缺少分号）

问题： next.js 无法运行构建命令，即使我可以毫无问题地在开发模式下运行它。它说 css 中缺少分号。当然没有...

使用打字稿创建react-app css模块：无法解析.module.css

我正在尝试将CSS模块与打字稿和create-react-app反应应用程序一起使用。 我确实导入了'./App.modules.css';在我的 App.tsx 中，但出现错误： 找不到模块：无法解析'./App.modules.cs...

CSS 模块类适用于开发，但在生产中被覆盖

我项目中的所有样式都是在 css 模块中定义的，直到最近我才注意到，在 Nextjs 生成的生产版本中，其中一些样式被其他样式覆盖（这会...

样式未通过 Rollup 导出

我正在构建一个包含 React、Typescript 和 Css 模块的 ui 库。 Rollup 没有导出我的样式 从“@rollup/plugin-node-resolve”导入解析； 从'@rollup/plugin-commonjs'导入commonjs；

Tailwind CSS tree-shaking 是否可以与 *.scss 模块中的 @apply 规则一起使用？

我的理解是，Tailwind CSS 会进行树摇，只提供与我正在使用的类捆绑的 CSS。所以在下面的例子中： 我的理解是，Tailwind CSS 会进行 tree-shake，只提供与我正在使用的类捆绑的 CSS。所以在下面的例子中： <div class="flex flex-row"> </div> ...最终的 Tailwind 捆绑包仅包括： .flex { display: flex; } .flex-row { flex-direction: row; } 但是，我想知道@apply规则是否同样有效？所以如果我有： import styles from 'styles.scss'; export default function Example() { return ( <div className={ styles.flex_row }> </div> ) } 还有... .flex_row { @apply flex flex-row; } 这仍然会为我提供使用的 Tailwind 类的最小捆绑包吗？ 我已经用 Google 搜索并阅读了 Tailwind 文档，但我无法找到任何内容。我会看看是否可以查看输出的捆绑包，看看它是否在那里很明显...... 考虑在 @layer base/components/utilities 规则中定义规则，并确保 Tailwind 在 Sass 编译后处理生成的 CSS 文件。这使得 CSS 规则对于 Tailwind 来说“已知”，因此 Tailwind 将对其进行处理和“tree-shake”。 顺便说一句，您可能还希望按照 Tailwind 的创建者 Adam Wathan 的建议完全避免 @apply： https://twitter.com/adamwathan/status/1226511611592085504 坦白：Tailwind 中的 apply 功能基本上只是为了欺骗那些因长长的类列表而推迟尝试该框架的人。 你几乎不应该使用它😬 改用实用程序乱七八糟的 HTML。 https://twitter.com/adamwathan/status/1559250403547652097 我可以绝对肯定地说，如果我从头开始使用 Tailwind CSS，就不会有 @​apply 😬 这种行为极其复杂，每个人都在努力建立正确的心理模型来理解它应该做的事情，并且它鼓励了糟糕的 CSS 架构。

从 SCSS 在 CSS 模块中组合全局类

在 SCSS 中编写时，如何从 CSS 模块中的全局类进行组合？ 根据（我对）CSS 模块的全局类名文档的构成，以下内容应该有效...

CSS 模块样式被 CSP 阻止，而 style-src 指令没有不安全内联

我有一个使用 CRA 创建的 React 应用程序，我正在使用 CSS 模块来设置组件的样式。 我创建带有 .module.css 前缀的 CSS 文件。示例：组件名称.module.css 然后我导入 CSS ...