使用 Webpack 将选择器全局添加到我的所有 CSS 选择器(在构建时)
Posted
技术标签:
【中文标题】使用 Webpack 将选择器全局添加到我的所有 CSS 选择器(在构建时)【英文标题】:Globally add selector to all my CSS selector with Webpack (at build time) 【发布时间】:2017-07-19 14:12:07 【问题描述】:我想将一个特定的选择器全局附加到我的应用程序中使用的所有 CSS 选择器。
我正在使用 React 和那些 Webpack 加载器 post-css
、css-loader
、sass-loader
和 extract-text-webpack-plugin
。
我不想在 jsx 文件中编辑我的所有类名。我只想在构建时附加这个特定的选择器。
是否有加载器来实现这一点?或任何其他解决方案...
我实际拥有的:
.myClass
...
&--blue ...
Webpack 转译后我想要什么:
.specificClass .myClass ...
.specificClass .myClass--blue ...
谢谢
高缇耶
PS:我需要这个功能的原因是为了避免 CSS 选择器与我正在集成我的应用程序的网站发生冲突。我不想手动编辑我所有的 scss 文件来附加选择器。
【问题讨论】:
【参考方案1】:这应该可以在你的主 sass 文件中解决:
.specificClass
@import 'variables';
@import 'fonts';
// ... do more imports
【讨论】:
我没有单一的 sass 入口点。我直接在 React 组件上导入我所有的 scss 文件。以上是关于使用 Webpack 将选择器全局添加到我的所有 CSS 选择器(在构建时)的主要内容,如果未能解决你的问题,请参考以下文章
Sass - 为从文件导入的所有类添加前缀(使用 sass 导入或 webpack 加载器)
`/deep/` 选择器无法在我的 VueJS 应用程序中使用 sass-loader