css-modules

问题 I'm busy learning React with CSS-Modules and I don't quite understand how one would store variables? For example, in Sass you're able to do this: // _variables.scss $primary-color: #f1f1f1; // heading.scss @import './variables'; .heading { color: $primary-color } How do you achieve this in CSS Modules? 回答1: One way could be to use dependencies. For example, // variables.css .primaryColor { color: #f1f1f1 } // heading.css .heading { composes: primaryColor from "./variables.css" } See more

问题 I have a react component which has X options for a stylesheet to be imported which is using CSS Modules. I ideally want to have a global environment variable fetched by using e.g. process.env.THEME I can't use: import MyStyleSheet from `${process.env.THEME}/my.module.css` I can use: const MyStyleSheet = require(process.env.THEME/my.module.css); however..... import/no-dynamic-require eslint rule kicks off saying its bad. https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules

问题 I am using Jest and Enzyme to test my application. I am getting error: FAIL app/containers/Navbar/NavbarContainer.test.js ● Test suite failed to run app/components/Navbar/styles.css: Unexpected token (1:0) > 1 | @import "../../styles/base/_variables"; | ^ 2 | 3 | .navbar{ 4 | width: $navbar-width; This is my Jest configuration in package.json: "jest": { "verbose": true, "globals": { "env": { "isProd": false, "isDev": true, "command": "start" } }, "moduleNameMapper": { "\\.(css)$": "identity

问题 I have a component: import React from 'react'; import * as styles from './RedComponent.css'; class RedComponent extends React.Component { render () { return <div className={ styles.red }></div>; } } This is the test case: describe('Test suite', () => { test('RedComponent tests', () => { const wrapper = shallow(<RedComponent />); }); console.log(wrapper.debug()); gives <div className={[undefined]}></div> instead of <div className="RedComponent__red"></div> If I console the imported styles I

问题 I have a component: import React from 'react'; import * as styles from './RedComponent.css'; class RedComponent extends React.Component { render () { return <div className={ styles.red }></div>; } } This is the test case: describe('Test suite', () => { test('RedComponent tests', () => { const wrapper = shallow(<RedComponent />); }); console.log(wrapper.debug()); gives <div className={[undefined]}></div> instead of <div className="RedComponent__red"></div> If I console the imported styles I

问题 I'm trying to make semantic-ui-react library to work with CSS module. My application uses babel-plugin-css-module . This is my css-loader configuration { test: /\.css$/i, use: [ { loader: ExtractCssChunks.loader, options: { hot: true } }, { loader: "css-loader", //generating unique classname options: { importLoaders: 1, // if specifying more loaders modules: true, sourceMap: true, localIdentName: "[path]___[name]__[local]___[hash:base64:5]" //babel-plugin-css-module format //localIdentName: "

问题 I'm learning how to use css modules with react, below is a working example of a checkbox here's what it looks like (pure HTML + CSS fiddle) without react. import React from 'react' import CSSModules from 'react-css-modules' import styles from './checkbox.css' export function Checkbox (props) { return <div styleName="checkbox--container"> <input styleName="checkbox" type="checkbox" {...props}/> <span styleName="checkbox--styled"></span> </div> } export default CSSModules(Checkbox, styles) This

问题 I'm using CSS modules and by far everything was working great. We started to use external UI library along with our own one, so I'm writing components like this: <div className={styles['my-component']}> <ExternalUIComponent /> </div> Assuming that the ExternalUIComponent has its own class that in the final CSS file looks like this external-ui-component , how can I make adjust this component styling from my css file? The below example does not work: .my-component { font-size: 1em; } .my

问题 I have understood the concept of CSS modules so much that I am convinced that I do not want to do anything else that that for the future. Currently I am trying to refactor an existing app to use CSS modules, the app has used classic sass with BEM methodology since. Before I describe my problem I want to make clear that I undestand that I am addressing an issue that is not really within the domain of CSS modules. One should apply styles solely for usage inside a single module. At the most one

问题 I have a file using scss with css-modules like so: import styles from './Login.scss'; The webpack build works fine but i'm getting a flow error: Required Module Not Found In my .flowconfig I have [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' -> '<PROJECT_ROOT>/flow/CSSModule.js.flow