one-loader and gatsby

[Zauberfisch]

Gatsby (and probably also next.js) abstract the webpack configuration away, and therefore make normal webpack configuration as documented in the one-loader readme.

Gatsby provides hooks to append the webpack config, but in their documentation says, you should avoid editing the webpack config and always check for an existing gatsby module first.

I've got it working with the config below, but it might be worth creating a one-loader gatsby plugin.

// gatsby-node.js

module.exports = {
	onCreateWebpackConfig: ({stage, rules, loaders, plugins, actions}) => {
		actions.setWebpackConfig({
			module: {
				rules: [
					{
						test: /\.one$/,
						use: [
							{
								loader: 'one-loader',
								options: {
									map: {
										'text/css': rules.css().use,
										'text/scss': [...rules.css().use, 'sass-loader'],
										'javascript': rules.js().use,
									}
								}
							},
						],
					},
					{
						test: /\.scss$/,
						use: [...rules.css().use, 'sass-loader'],
					},
				],
			},
		})
	},
	resolvableExtensions: () => {
		return [`.one`];
	}
}

So, should we (and is someone willing to), create a gatsby plugin?
Or should we create some documentation here to show people how to get it working manually?

[Zauberfisch]

oh, and for some reason, I had to manually create a postcss.config.js, because it somehow didn't pickup the defaults that gatsby promisses to have.

[MunGell]

Hi @Zauberfisch

Thanks for this valuable information, I personally would say - lets start with the simplest option for the moment, then work on the rest if there is demand for that. In this particular case, if documenting such use case is easier than creating a plugin - lets have documentation done first.

Thanks again for your proactive approach to the project!

[Zauberfisch]

ok, I guess I'll create an example project in the examples directory and add a 1-liner to the readme to point people there?