Closed felipecarrillo100 closed 4 years ago
https://github.com/webpack-contrib/css-loader#compiletype, we even have example in docs for this case https://github.com/webpack-contrib/css-loader#separating-interoperable-css-only-and-css-module-features
Why is this issue closed? Where is the solution? I have the same problem and I can't find any solution.
Why is this issue closed? Where is the solution? I have the same problem and I can't find any solution.
See the linked CRA 4 issue. Basically you change your css-loader options in webpack for SCSS files so the compileType
is icss
. Here's the change in my own config:
test: /\.scss$/,
use: [
- { loader: "style-loader" },
- { loader: "css-loader" },
+ "style-loader",
+ {
+ loader: "css-loader",
+ options: {
+ importLoaders: 1,
+ modules: {
+ compileType: "icss"
+ }
+ }
+ },
I had similar issue with packages: "css-loader": "6.2.0", "sass-loader": "12.1.0", "style-loader": "3.2.1", "webpack": "5.21.0"
and configuration:
{ test: /\.scss$/, use: [ { loader: 'style-loader', }, { loader: 'css-loader', }, { loader: 'resolve-url-loader', }, { loader: 'sass-loader', options: { sourceMap: true, }, }, ], },
After upgrading style-loader from 2.0.0 to 3.2.1 SCSS variables imported in JS stops working - empty object:
` import variables from 'shared/ReactComponents/scss/variables.scss'
export const REPORT_STATUS = { OK: 'OK', ERROR: 'ERROR', NOT_TESTED: 'NOT TESTED', }
const REPORT_STATUS_TO_COLOR_MAP = {
} ` Finally I solved it using SCSS modules - more here:
I ran into (what I think is) this issue today and this thread seems to rank quite high for it so here's what ended up being my solution: make sure your JS import uses the .default
property.
I had to change:
const { tabletPx } = require('../../scss/_variables.scss');
To:
const { tabletPx } = require('../../scss/_variables.scss').default;
The config for recent versions of css-loader
is now:
// ...
{
loader: 'css-loader',
options: {
modules: true,
},
},
// ...
Hope this helps someone else in the same situation.
Why is this issue closed? Where is the solution? I have the same problem and I can't find any solution.
See the linked CRA 4 issue. Basically you change your css-loader options in webpack for SCSS files so the
compileType
isicss
. Here's the change in my own config:test: /\.scss$/, use: [ - { loader: "style-loader" }, - { loader: "css-loader" }, + "style-loader", + { + loader: "css-loader", + options: { + importLoaders: 1, + modules: { + compileType: "icss" + } + } + },
Instead of using "compileType", the options.modules
config should be mode: "icss"
now according to https://github.com/webpack-contrib/css-loader#separating-interoperable-css-only-and-css-module-features
Other: sass-loader: "8.0.2", style-loader: "1.2.1",
Expected Behavior
In version CSS-loader 3.x.x I was able to import SCSS variables but since I migrated to css-loader 4.x.x this no longer works, now I get an empty object.
Example: webpack.config.js
_export.scss
somefile.js
With css-loader 3.x.x and older everything works fine as expected. I get variables as an object containing the values { whitecolor: "#fcf5ed"; darkcolor: "#402f2b"; lightcolor: "#e6d5c3" }
Actual Behavior
Since migrated to css-loader 4.x.x instead of the expected values I get an empty object {} If I role back to an older version of css-loader everything works again as expected.
Code
This is a full copy of my webpack.config.js
How Do We Reproduce?
Just try to export some variables in a scss files and import in a js file. It all works fine with css-loader 3.x.x or older. With css-loader 4.x.x the imported variables are object is and empty object.