score:1
i was having the same issue, i solved it by splitting the webpack's css loader rules into 2:
- will include everything except node_modules, uses css modules. this will deal with internal css modules.
- will only include node_modules, exclude /src. this will deal with semantic-ui and any other third-party library
the resulting rules on webpack.config.dev.js
generated by cra's eject script, would look like this:
// internal css
// "postcss" loader applies autoprefixer to our css.
// "css" loader resolves paths in css and adds assets as dependencies.
// "style" loader turns css into js modules that inject <style> tags.
// in production, we use a plugin to extract that css to a file, but
// in development "style" loader enables hot editing of css.
{
test: /\.css$/,
exclude: /node_modules/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importloaders: 1,
modules: true,
localidentname: '[name]__[local]___[hash:base64:5]'
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// necessary for external css imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'firefox esr',
'not ie < 9', // react doesn't support ie8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
// external css
{
test: /\.css$/,
include: /node_modules/,
exclude: /src/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importloaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// necessary for external css imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'firefox esr',
'not ie < 9', // react doesn't support ie8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
i don't think this answer is optimal, but certainly worked for me. good luck
score:2
add the following in the rules section:
const config = {
entry: {
vendor: ['semantic-ui-react'],
},
...,
module: {
rules: [
...,
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},
{
test: [/\.eot$/, /\.ttf$/, /\.svg$/, /\.woff$/, /\.woff2$/],
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
],
},
...,
};
module.exports = config
hopes it helps !
Source: stackoverflow.com
Related Query
- Using Semantic UI With CSS Modules in Webpack
- Error using css modules in typescript react with webpack config
- How to import CSS modules with Typescript, React and Webpack
- Sass with CSS Modules & Webpack
- Use CSS Modules in React components with Typescript built by webpack
- Using css modules with Extract Text Plugin
- React: Inline CSS modules in JSX with Webpack
- using google fonts in nextjs with sass, css and semantic ui react
- Error while configuring CSS modules with webpack
- Using webpack to load CSS files from node modules
- Using external styles and multiple class names with webpack css loader
- media query doesn't work properly with css modules when using an arbitrary class name
- Using global css files with CSS Modules
- Searching for Webpack config for React Components Library with Typescript, SASS & CSS Modules via SASS support
- Using sourceMaps with CSS Modules
- Using font awsome icons with css modules
- Nested classes not working in CSS Modules with webpack
- Configuring CSS modules in development/production with webpack and React
- How to use CSS Modules with webpack in React isomorphic app?
- CSS Modules not working as expected in tests with Jest and Enzyme, using create-react-app
- using css modules how do I define more than one style name
- How to apply global styles with CSS modules in a react app?
- How to use images in css with Webpack
- How to use css modules with create-react-app?
- Multiple classNames with CSS Modules and React
- Using CSS transform: translate(...) with ReactJS
- What is the benefit of using styled components over css modules in Reactjs
- Using autoprefixer with postcss in webpack 2.x
- Using the Webpack dev server with a PHP application
- Remove unused css with React and Webpack
More Query from same tag
- How do I attach an existing <IMG> element (HTMLImageElement) to a Facebook React.js component?
- How can "False positive" coverage in React Jest tests be avoided
- Set react-datepicker time input start time but not selected
- Why "this" keyword should be used in react click events?
- Replace class using javascript is not working in reactjs
- react router changes url but not navigating to page
- Trouble getting data from JSON with ReactJS
- Sending attachment files uploaded by users to be sent to an email address account
- Updating my imported variable's value in React.js
- How to get the full height?
- React component "unexpected token function"
- Several _document.js for Open Graph markup
- Next js initial page loading time is too slow compared to subsequent page loads
- How to dynamically build an object for a React Component using props?
- How setState with arrow function to change objects which are not in an Array
- React date picker filtering dates issue
- Error using refs in React 0.14.8
- Login process using Reactjs, Axios and local JSON file
- How does Firebase phone number authentication work?
- TypeError: Cannot read property 'foo' of null - Object, React
- React (Gatsby) deactivate Google Analytics in TypeScript
- Array map into string with line break - React
- How can I activate tooltip only when ellipsis?
- react isomorphic and initial data
- Mobx forcing computed values to update
- Use browser history admin-on-rest
- Typescript fails to infer props when destructuring props with rest syntax
- React component not replaced
- TypeError: is not a function error in child component
- React-Leaflet: Placing map control components outside of map?