Compiled CSS is not being attached to JSX in react build
I am currently attempting to test the first build of my react application. All my .scss looks great in dev, however, when I build for production none of my styling is added to the jsx, unless I use :local(my-css) around every item.
for the boilerplate of the application, I used create-react-app. All the dependencies are listed in the package.json below. so far, I have tried messing with my webpack.config.prod.js to change various options for all the loaders. Among this, I have tried setting sourceMap to true and false in the css-loader options, and tried minimizing the scss config to just:
test: /\.scss/,
loader: 'style-loader!css-loader!sass-loader'
I have also tried removing the postcss-loader with no success. I have searched so many different sites trying to figure out a solution, that I ran out of articles written in English and had to translate the pages from various languages.
One other relevant thing to note is that the scss is compiled into css and added to a main.css file. main.map.css also contains the correct mappings for files. There are also .css files for every component present that contain non-minified versions of the compiled css. Image to illustrate this:
Prod Webpack Config:
{
test: /\.css$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract(
Object.assign(
{
fallback: {
loader: require.resolve('style-loader'),
options: {
hmr: false,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]'
},
},
use: [
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
minimize: true,
sourceMap: shouldUseSourceMap,
},
},
{
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',
}),
],
},
},
],
},
extractTextPluginOptions
)
),
},
{
test: /\.scss$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract(
Object.assign(
{
fallback: {
loader: require.resolve('style-loader'),
options: {
hmr: false,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]'
},
},
use: [
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
minimize: true,
sourceMap: shouldUseSourceMap,
},
},
{
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',
}),
],
},
},
{
loader: 'sass-loader',
},
],
},
extractTextPluginOptions
)
),
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},
package.json:
"dependencies": {
"@babel/core": "^7.2.2",
"@babel/preset-env": "^7.2.3",
"@babel/preset-react": "^7.0.0",
"@babel/runtime": "^7.2.0",
"@kennethormandy/react-fittext": "^0.5.1",
"ajv": "^6.6.2",
"autoprefixer": "7.1.6",
"axiom": "^0.1.6",
"axios": "^0.18.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^9.0.0",
"babel-jest": "^23.4.2",
"babel-loader": "^8.0.5",
"babel-plugin-react-css-modules": "^5.0.0",
"babel-preset-react-app": "^6.1.0",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "1.1.3",
"css-loader": "0.28.7",
"dotenv": "4.0.0",
"dotenv-expand": "4.2.0",
"eslint": "4.10.0",
"eslint-config-react-app": "^2.1.0",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.39.1",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-jsx-a11y": "5.1.1",
"eslint-plugin-react": "7.4.0",
"file-loader": "^1.1.11",
"fs-extra": "3.0.1",
"html-webpack-plugin": "2.29.0",
"imagemin": "^5.3.1",
"img-loader": "^3.0.1",
"jest": "20.0.4",
"lodash": "^4.17.11",
"moment": "^2.23.0",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.8",
"postcss-scss": "^2.0.0",
"promise": "8.0.1",
"prop-types": "^15.6.2",
"proptypes": "^1.1.0",
"raf": "3.4.0",
"react": "^16.7.0",
"react-big-calendar": "^0.20.2",
"react-dev-utils": "^5.0.3",
"react-dom": "^16.7.0",
"react-google-login": "^4.0.1",
"react-icons": "^2.2.7",
"react-input-mask": "^2.0.4",
"react-linkify": "^0.2.2",
"react-redux": "^5.1.1",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-textarea-autosize": "^7.1.0",
"react-transition-group": "^2.5.2",
"redux": "^4.0.1",
"redux-axios-middleware": "^4.0.0",
"redux-logger": "^3.0.6",
"redux-persist": "^5.10.0",
"redux-thunk": "^2.3.0",
"resolve": "1.6.0",
"style-loader": "0.19.0",
"sw-precache-webpack-plugin": "0.11.4",
"url-loader": "^0.6.2",
"webpack": "3.8.1",
"webpack-dev-server": "2.9.4",
"webpack-manifest-plugin": "1.3.2",
"whatwg-fetch": "2.0.3"
},
"devDependencies": {
"extract-text-webpack-plugin": "^3.0.2",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"sass": "*"
}
The only thing that seems to work is if I wrap every item in every scss file in :local(). This is not a satisfactory option, as I wish to know what is wrong with my config so I can avoid it in the future. Also, I would have to go and manually change hundreds of items which does not sound like a good time. Any insight on how to tackle this issue would be greatly appreciated.
I fixed the problem. Turns out you need to enable modules in 'css-loader' like so:
{
loader: require.resolve('css-loader'),
options: {
modules: true //must add this
importLoaders: 1,
minimize: true,
sourceMap: shouldUseSourceMap,
},
},
- Rcpp Rf_warningcall compiler warnings
- Modify the name of factor variables in lm function(summary function)
- Extreme value analysis and quantile estimation using log Pearson type 3 (Pearson III) distribution - R vs Python
- How to hide NAs when using xlsx::saveWorkbook?
- How do I retrieve a simple numeric value from a named numeric vector in R?
- Matching pair-wise columns from left to right across rows in one dataframe to another dataframe and adding new columns with matching values
- Income to outcome flow chart in Sankey plotly R
- color mapping in geom_conn_bundle not showing correctly
- Print R package startup message AFTER automatic package conflict messages instead of before
- Summing a set of R dataframe rows (column-wise), while retaining the first n columns
- Added variable / partial regression plots for groups in an interaction?
- how to make a topoplot in R with coordinates variable distribution
- List of all functions in base R?
- Plotting multiple plots for different initial conditions in one graph
- Printing repetitively on the same line in R
- Generating UI/Server based on initial selection
- Subset dataframe based on pickerInput
- How to let user pick the data in R-shiny?
- Couldn't show my simple bar charts separately on Shiny R dashboardBody
- How to programmatically filter contents of a second shiny app displayed via iframe
- How to select specific interesting groups for the boxplot in R Shiny app?
- Crosstable and Plot grouping with reactive values
- Is there a way to make multiple Shiny picker inputs where the selections must be disjoint?
- Delay/avoid duplication of shiny server side functions until after credentials
- Predictions only returns value "1"
- How to display a busy indicator in a shiny app?
- Append doesn't work when writing to CSV in R
- Changing the start date of a gantt chart in DiagrammeR
- Check for installed packages before running install.packages()
- Compare two columns element-wise