css alias

Question

Hi, I’m using webpack alias to target some util folders on my .scss files. for example a scss file I’m using looks like this:

@import '~app/styles/variables';
.myModule {
    background-color: $main-colour;
}

Unfortunately I don’t think this is working with my current docz configuration.

Here’s what I have:

import { css } from 'docz-plugin-css';

export default {
    dest: '/documentation',
    plugins: [
        css({
            preprocessor: 'sass',
        }),
    ],
};

Am I doing something wrong? I kind of don’t want to import my variables through relative paths…

Thanks in advance Andre

[pedronauck]

for sure @andrevenancio ✌️

[andrevenancio]

Hi @pedronauck thanks for your reply.

I now have this working and docz exports my component’s css along side the documentation folder. I do have a question though. Where am I to change the file name? It gets saved with a name replicating the original source location + hash . css

Example: my component is on /src/app/cms-components/hero-text.mdx

And that gets saved to /documentation/static/css/src-app-cms-components-hero-text.SOMEBIGHASH.css

This is likely to be in the same modifyBundlerConfig?