ahmadawais / create-guten-block

📦 A zero-configuration #0CJS developer toolkit for building WordPress Gutenberg block plugins.
https://Awais.dev/cgb-post
MIT License
3.16k stars 326 forks source link

Ability to adapt webpack confg #151

Open drzraf opened 5 years ago

drzraf commented 5 years ago

Feature Request

My block has a npm dependency relying on CSS modules. As such, some of these external source-components contain:

import style from './style.scss'
// [...]
<div className={style.foo}>

When importing such a component, style is empty. Block's components are rendered unstyled since no class is attached.

These external components depend on a different webpack configuration rules for *CSS (from @storybook/react)

                        {
                                test: /style\.s[ac]ss$/,
                exclude: /block/,
                                use: [
                                        { loader: 'style-loader',
                                          options: { sourceMap: true } },
                                        { loader: 'css-loader',
                                          options: { modules: true, importLoaders: true } },
                                        { loader: 'sass-loader',
                                          options: { sourceMap: true } }
                                ]
                        },

Describe the solution you'd like I think using altering the main webpack configuration. Adding this kind of rules to my own project seems like the first obvious solution. But "how"? I know that some webpack plugins exist for this like webpack-merge, but that seem overkill. A flag to specify a webpack-config path could be another alternative (it's currently hardcoded)

Teachability, Documentation, Adoption, Migration Strategy tbd

KenEucker commented 5 years ago

I am also encountering an issue with an inadequate webpack config when trying to include semantic-ui-css with my project. It looks like I need to add the following:

rules: [
  {
    test: /\.css$/,
    loader: 'style-loader!css-loader'
  }
]

but cannot do that from outside cgb.

elvismdev commented 4 years ago

A flag to specify a webpack.config.js file placed a the root of our plugin would be great to override templated webpack rules.

We could add another file to build like:

// webpack.config.js
const defaultConfig = require("./node_modules/cgb-scripts/config/webpack.config.dev");

// Export configuration.
module.exports = {
    ...defaultConfig,
    entry: {
        ...defaultConfig.entry,
        './dist/frontend.build': './src/frontend.js',
    },
};

I think that could handle #73