css alias

[andrevenancio]

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]

Hi @andrevenancio, you need to set the alias for docz bundler too. You can do that using modifyBundlerConfig on your config:

// dozcrc.js
export default {
  modifyBundlerConfig = config => {
    /* add your alias here */
    return config
  }
}

[andrevenancio]

Should this be the same alias as my webpack is using?

Example:

// webpack.dev.js
const path = require('path');

const {
    PATH_DIST,
    PATH_SOURCE,
} = require('./webpack.config');
const rules = require('./rules');
const plugins = require('./plugins');

module.exports = {
    entry: path.join(PATH_SOURCE, 'app', 'index.js'),

    mode: 'development',

    output: {
        path: PATH_DIST,
        filename: 'js/app.js',
        publicPath: '/',
    },

    resolve: {
        extensions: ['*', '.js', '.jsx'],
        alias: {
            app: path.resolve(PATH_SOURCE, 'app'),
            server: path.resolve(PATH_SOURCE, 'server'),
        },
    },

    module: {
        rules: [
            rules.scss.dev,
            rules.jsx,
        ],
    },

    plugins: [
        plugins.core,
        plugins.clean,
        plugins.copy,
    ],

};

Does this mean that my docz should be?

// dozcrc.js
export default {
  modifyBundlerConfig: (config) => {
    resolve: {
        extensions: ['*', '.js', '.jsx'],
        alias: {
            app: path.resolve(PATH_SOURCE, 'app'),
            server: path.resolve(PATH_SOURCE, 'server'),
        },
    },
    return config
  }
}

[pedronauck]

for sure @andrevenancio :v:

[andrevenancio]

Oh actually my problem was related with docz-plugin-css, I've added this issue Which I think I've magically fixed.

I'll add a comment there for future reference. Obrigado @pedronauck, um abraco.

[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?