goodday all,
I am trying to figure out if there is a way to link .scss in a way that they share their classnames.
So here is what I am trying to achieve.
|- theme
| |- theme_default.scss
|- snippets
| |-componentA
| | |-componentA.js
| | |-componentA.scss
In the ComponentA.js
file I am attaching a class to the component from ComponentA.scss
using the css-loader/CommonJS (I am using a webpack dev-environment if anyone needs to know).
In the theme_default.scss
I am trying to apply a theme-style to 'ComponentA'. The default theme-file should be exchangable by other theme-files.
The problem is that the class-names (eventhough identical in the source-files) are hashed when compiled into regular '.css' files, meaning the class-name from the theme cssfile will never match the class-name from the ComponentA cssfile.
So how can I make clear the theme-file should use the same class-names as the Component-file without declaring the styles as global
? I tried using @import
and @use
in the theme-file, but it only copies the rules while the class-names are still not identical.
Any input is welcome, thanks in advance for reading.
EDIT
On request some examples
theme_default.scss
.theme_default {
.comp_a /* This class should be the same (hashed) as in the componentA.scss */ {
background-color: red; /* awefull, but just for example sake */
}
}
componentA.scss
.comp_a {
display: flex;
flex-wrap: no-wrap;
/*.. etc.*/
}
componentA.js
import style from './componentA.scss'
// this is how I set the style, but this class does NOT know about any theme stylesheet. So nothing can be done from here
element.classList.add(style.comp_a);
To apply the theme I set the theme_default
class (the hashed version) to a root element and let the browser figure out how to efficiently (re)render it.
I read that the css-loader has a mechanism with compose(s)
, which might solve this problem. But it seemingly doesn't work with either webpack or vsCode. So in any case someone needs it, here is the snippet from the webpack config file regarding css handling.
webpack.configuration.js
{
test: /\.s[ac]ss$/i,
include: [
path.resolve(__dirname, 'src')
],
exclude: [
path.resolve(__dirname, 'node_modules'),
path.resolve(__dirname, 'build'),
path.resolve(__dirname, 'test'),
],
use: [
// Creates `style` nodes from JS strings
isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
// Translates CSS into CommonJS
{
loader: 'css-loader',
options:
{
modules:
{
exportGlobals: true,
},
importLoaders: 2,
sourceMap: isDevelopment,
}
},
// Transform urls
{
loader: 'resolve-url-loader',
options:
{
sourceMap: isDevelopment
}
},
// Compiles Sass to CSS
{
loader: 'sass-loader',
options:
{
sassOptions:
{
indentWidth: 4,
sourceMap: isDevelopment,
sourceMapContents: false,
outputStyle: 'expanded'
},
},
}
],
},