css-modules

ts-loader / css-loader not being able to import/resolve file

由 你离开我真会死。 提交于 2019-12-08 08:34:58
问题 Trying to add css modules using style-loader and css-loader. Having a hard time figuring this out. I'm also not sure whether it's ts-loader to blame or 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"], }, module: { rules: [ { test: /\.tsx?$/, loader: "ts

Adding style attribute on custom React element does not seem to pick up

由 被刻印的时光 ゝ 提交于 2019-12-06 11:39:23
问题 I have code as follows (using CSS modules): return ( <div> <LandingPage className={styles.hidden} /> </div> ); Which doesn't work (i.e. doesn't apply the CSS to the element). However, returning <div> <div className={styles.hidden}> <LandingPage /> </div> </div> Works just fine. Why does applying a className on a custom element cause the class to be ignored? 回答1: Here className will not get applied directly on LandingPage component, it is basically a props value that you are passing from

How to adjust Capybara finders on a site using css-modules?

由 我与影子孤独终老i 提交于 2019-12-05 19:58:18
In our automated tests, a typical line in our code might look something like: find('.edit-icon').click We're on our way to using css-modules in our project and I've been warned that class names may change dramatically. A pretty zany example is this site that uses emojis in its class names (when you inspect the page): css modules by Glenn Maddern How might I best prepare for a change this drastic? I imagine many of our specs breaking, but I am a little worried about being unable to write tests at all with this new technology in our project. Using custom capybara selectors you can abstract away

CSS Modules - referencing classes from other modules

由 假装没事ソ 提交于 2019-12-05 17:48:47
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 should compose CSS classes with other CSS classes of other modules. But basically: You build an (HTML-

What does :global (colon global) do?

由 荒凉一梦 提交于 2019-12-04 16:10:46
问题 In some SCSS files, I see the following: :global { /* ... */ } I don't know if it is an SCSS feature or a CSS feature. I tried searching about it but couldn't find any good results at first sight. 回答1: This operator is used in CSS Modules. Modular CSS uses a CSS Modules compiler to scope CSS styles within their respective modules (e.g., React component). Here's an example from a React module (in the file ErrorMessaging.less for the ErrorMessaging.jsx React component): :global(.ocssContainer)

CSS Modules: How do I disable local scope for a file?

由 亡梦爱人 提交于 2019-12-03 11:24:44
问题 I'm using CSS Modules (through Webpack css loader) in a new React project, and even though it's working great, I'm having trouble getting the SCSS for React Select to work. I imagine this is because it tries to create local classNames, which the JS in react-select is unaware of. Is there a way to import an entire .scss file, but scoped globally instead of locally? 回答1: I generally define two CSS loaders like this: // Global CSS // We make the assumption that all CSS in node_modules is either

Can't import CSS/SCSS modules. TypeScript says “Cannot Find Module”

由 左心房为你撑大大i 提交于 2019-12-03 06:32:55
问题 I'm trying to import a theme from a CSS module but TypeScript gives me a "Cannot Find Module" error and the theme isn't applied on runtime. I think there's something wrong with my Webpack config but I'm not sure where the problem is. I'm using the following tools: "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

How to apply global styles with CSS modules in a react app?

由 和自甴很熟 提交于 2019-12-03 04:04:54
问题 I'm currently using CSS Modules with React for my styling. So each of my components is importing in it's component specific css file, like so: import React from 'react'; import styles from './App.css'; const example = () => ( <div className={styles.content}> Hello World! </div> ); export default example; This works fine when styling individual components, but how do I apply global styling (html, body, header tags, divs, etc.) that isn't component specific? 回答1: Since you're using the ES6

CSS Modules: How do I disable local scope for a file?

由 女生的网名这么多〃 提交于 2019-12-03 01:45:51
I'm using CSS Modules (through Webpack css loader) in a new React project, and even though it's working great, I'm having trouble getting the SCSS for React Select to work. I imagine this is because it tries to create local classNames, which the JS in react-select is unaware of. Is there a way to import an entire .scss file, but scoped globally instead of locally? I generally define two CSS loaders like this: // Global CSS // We make the assumption that all CSS in node_modules is either // regular 'global' css or pre-compiled. loaders.push({ test: /\.css$/, include: /node_modules/, loader:

Unexpected character '@' You may need an appropriate loader to handle this file type

由 谁说我不能喝 提交于 2019-12-02 10:31:20
问题 This is what I get when I try to run webpack: the error I get is: "ERROR in ./v3/app/styles/main.scss Module parse failed: /Users/vovina/widget-login-react/v3/app/styles/main.scss Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type." it can't resolve @import , any ideas on this? my webpack config is as follow: const childProcess = require('child_process') const CopyWebpackPlugin = require('copy-webpack-plugin') const ExtractTextPlugin = require('extract
订阅 css-modules