-
3 votesanswersviews
有关如何使用postcss-modules而不是css-modules的示例吗?
内置于_1593548中的CSS模块支持看起来非常简单:你只需要 require / import CSS文件和webpack生成代码,它们做两件事: 将生成的CSS注入您的网页 返回要使用的类名字典 . 而且用法也非常简单: import styles from "./style.css"; element.innerHTML = '<div clas... -
2 votesanswersviews
将全局css文件与CSS模块一起使用
我正在使用https://github.com/mxstbr/react-boilerplate作为项目,它使用CSS模块和postCSS作为样式,这很棒 . 但是,我还需要有一些用于排版,基本组件等的全局CSS文件 . 应该如何添加这些文件的最佳实践是什么?我已经看过使用preCSS但不完全确定如何在webpack中设置它,以便它可以将这些全局文件导入主样式表 . 我是webpack的新手(来自... -
2 votesanswersviews
CSS模块组合不起作用
我正在尝试使用postcss cssnext设置css模块 . 这一切似乎都运行正常,除了 composes 关键字根本不起作用 . 编译包时规则消失 . 这是我的webpack配置文件: 'use strict' const path = require('path') const webpack = require('webpack') const HtmlPlugin = require(... -
1 votesanswersviews
在css-loader之后使用postcss-loader
我正在使用CSS模块和webpack css-loader,然后我用mini-css-extract-plugin捆绑它们 . 以下是我的配置的样子: { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, { loader: "css-loader", ... -
1 votesanswersviews
反应| CSS模块| Materialise-CSS:.browser-default未应用
我在我的React应用程序中使用了Materialize-CSS和CSS-Modules . 我想对输入字段使用默认样式,但是当我尝试应用下面链接的文档所指示的“browser-default”时,输入字段仍然不会恢复为浏览器默认样式 . https://materializecss.com/helpers.html#browser-default import mStyles from 'mat... -
0 votesanswersviews
Gatsby.js css:自定义属性
我安装了gatsby cli并创建了一个基本节点/ gatsby.js项目 . 教程说“Gatsby开箱即用CSS模块 . ”我还想使用如下所述的自定义css属性:https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables (1)我创建了 src/layouts/variables.css 并使用自定义属性放入css,例... -
0 votesanswersviews
Webpack scss和css模块反应 - 意外的令牌字符串
我正在尝试使用scss(mixins,变量等)和css模块的组合来设置一个带有react的项目 . 然而,当我使用style-loader,css-loader,postcss-loader,sass-loader,sass-resources-loader,import-glob-loader设置webpack时 . 我收到以下错误: Worker error Error: Unexpecte... -
3 votesanswersviews
Postcss与css模块一起扩展
我有以下webpack配置: test: /.css$/, use: extractAppStyles.extract({ fallback: 'style-loader', use: [{ loader: 'css-loader', query: { modules: true, importLoad... -
1 votesanswersviews
不能在* .scss文件中使用composes(react-css-modules) - 模块构建失败:TypeError:无法读取属性'postcss' of null
当我尝试在类.topContainer中使用composes时,我在构建项目时在控制台中出错: 错误在./node_modules/css-loader?{"sourceMap":true,"modules":true,"localIdentName":"[local]--[hash:base64:5]","... -
0 votesanswersviews
使用Create-React-App Material UI组合的CSS模块
我无法理解材料UI网站上提供的文档,因为在使用css模块时会覆盖css样式 . 如果存在冲突的样式,我需要使用 !important hack来覆盖它们的样式 . 我试图按照他们的建议 css注射顺序 所以我的自定义css(使用css模块)来自材质UI css . 我试图关注的链接是https://material-ui.com/customization/css-in-js/#css-in... -
41 votesanswersviews
Sass与CSS Modules&Webpack
我一直在使用Webpack,Sass和CSS模块构建一个项目 . 通常在我的 .scss 文件中,我定义了一个类,如: :local(.button) { color: white; } 在我的React组件中,在 render 方法中,我需要样式: render = () => { const styles = require('./MyStyles.scss'); ... -
0 votesanswersviews
嵌套类在使用webpack的CSS模块中不起作用
我使用webpack和css-loader以及style-loader在我的React应用程序中启用css模块 . 这些是以下设置: Webpack配置: module.exports = { mode: "development", entry: __dirname + "/app/index.js", module: { ... -
1 votesanswersviews
React Component添加了由于导入的css模块而无法识别的classNames
目前正在开发一个使用React和CSS模块的大型项目 . 我想在一堆列表项上实现'react-anything-sortable' . 到目前为止,实现已经停滞不前,因为'react-anything-sortable'将以下类添加到'react-anything-component'中的任何子级:.ui-sortable,.ui-sortable-item,.ui-draggable和.ui-s... -
13 votesanswersviews
具有CSS模块和React的多个classNames
我正在使用以下代码根据来自props的布尔值在React组件中动态设置className: <div className={this.props.menuOpen ? 'inactive' : 'active'}> ... </div> 但是,我也使用CSS模块,所以现在我需要将className设置为: import styles from './styles.css';... -
1 votesanswersviews
Webpack将css中的node_module导入为全局
我曾经直接在javascript中导入import '!style-loader!css-loader!../../node_modules/react-soundplayer/styles/buttons.css' 但它太丑了我不喜欢它 在我的react组件中,我想指定一个css-module import style from './style/App.css' ,在 App.css 中,我... -
2 votesanswersviews
在React中如何只导入所需的Bootstrap样式 . Bootstrap css模块?
我想在我的React项目中使用bootstrap 4 . 构建的css文件应该只包含我的React组件中包含的引导类样式 . 我不是在寻找Bootstrap css类作为React组件;我不介意写 <div className='container'> 1. Reactstrap 我尝试使用reactstrap,并且是将bootstrap css类作为组件(例如 <Contain... -
0 votesanswersviews
babel-plugin-react-css-modules不支持背景图像
使用css-modules后,scss中的background-image将无效 . 请问,如何正确配置? 回购:https://github.com/pdsuwwz/Antd-app 错误: ERROR in ./src/script/components/redux-test/style.scss Module build failed (from ./node_modules/mini-... -
0 votesanswersviews
即使在弹出create-react-app之后,css模块也无法正常工作
我弹出了我的create-react-app以使用css模块 . 我修改了我的webpack.config.dev.js { test: /\.css$/, use: [ require.resolve('style-loader'), { loader: req... -
9 votesanswersviews
使用css模块做出反应如何将className作为prop传递给组件
如果我有一个react组件并且我想传入一个className,我该如何使用CSS模块执行此操作 . 它目前只提供className但不提供哈希生成的css模块名称,我将获得 <div className={styles.tile + ' ' + styles.blue}> 这是我的 Tile.js 组件 import React, { Component } from 'react';... -
0 votesanswersviews
React和CSS样式
在我的页面中,我必须使用两个反应组件 Component1和Component2 第1页代码 组件的所有样式都来自组件CSS文件 . 但对于页面布局,我有page1.css 我会编写选择器和类名并为page1.css定义样式 . 可能有许多页面和不同的布局具有相似的类名,我们如何控制不具有重写样式的行为 . 请帮助我理解相同的内容