I have an app made with Create React App, and want to use Storybook with it.
My app uses scss modules, so I am using CRACO to ensure my global scss variables and mixins are available in my scss modules. My CRACO config looks like this:
const sassResourcesLoader = require('craco-sass-resources-loader');
const sassInject = require.resolve('./src/css/global.scss');
module.exports = {
plugins: [
{
plugin: sassResourcesLoader,
options: {
resources: sassInject,
},
},
],
};
Of course, this config is not used by Storybook.
The default storybook config files look like the following:
// .storybook/main.js
module.exports = {
stories: [
'../src/**/*.stories.mdx',
'../src/**/*.stories.@(js|jsx|ts|tsx)'
],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/preset-create-react-app'
],
};
// .storybook/preview.js
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
}
I found some documentation that suggested something along the lines of these, which should allow adding the config I'm using with CRACO into storybook:
// .storybook/main.js
const sassResourcesLoader = require('craco-sass-resources-loader');
const sassInject = require.resolve('../src/css/global.scss');
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/preset-create-react-app'],
webpackFinal: (config) => {
config.plugins.push({
plugin: sassResourcesLoader,
options: {
resources: sassInject,
},
});
return config;
},
};
Unfortunately this just results in errors:
info @storybook/react v6.2.9
info
info => Loading presets
info => Serving static files from ./public at /
info => Loading 1 config file in "/Users/Me/myApp/.storybook"
info => Loading 7 other files in "/Users/Me/myApp/.storybook"
info => Adding stories defined in "/Users/Me/myApp/.storybook/main.js"
info => Using prebuilt manager
info => Loading Webpack configuration from `node_modules/react-scripts`
info => Removing existing JavaScript and TypeScript rules.
info => Modifying Create React App rules.
info => Using default Webpack4 setup
ERR! WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
ERR! - configuration.plugins[14] misses the property 'apply'.
ERR! function
ERR! -> The run point of the plugin, required method.
ERR! at Object.webpack [as get] (/Users/Me/myApp/node_modules/webpack/lib/webpack.js:31:9)
ERR! at Object.start (/Users/Me/myApp/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:92:27)
ERR! at async Promise.all (index 0)
ERR! at async storybookDevServer (/Users/Me/myApp/node_modules/@storybook/core-server/dist/cjs/dev-server.js:103:28)
ERR! at async buildDevStandalone (/Users/Me/myApp/node_modules/@storybook/core-server/dist/cjs/build-dev.js:107:31)
ERR! at async buildDev (/Users/Me/myApp/node_modules/@storybook/core-server/dist/cjs/build-dev.js:147:5)
ERR! WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
ERR! - configuration.plugins[14] misses the property 'apply'.
ERR! function
ERR! -> The run point of the plugin, required method.
ERR! at Object.webpack [as get] (/Users/Me/myApp/node_modules/webpack/lib/webpack.js:31:9)
ERR! at Object.start (/Users/Me/myApp/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:92:27)
ERR! at async Promise.all (index 0)
ERR! at async storybookDevServer (/Users/Me/myApp/node_modules/@storybook/core-server/dist/cjs/dev-server.js:103:28)
ERR! at async buildDevStandalone (/Users/Me/myApp/node_modules/@storybook/core-server/dist/cjs/build-dev.js:107:31)
ERR! at async buildDev (/Users/Me/myApp/node_modules/@storybook/core-server/dist/cjs/build-dev.js:147:5)
How can I successfully get Storybook to import my scss variables and mixins?
Thanks
You can use storybook-preset-craco package, which provides a one-line craco configuration for Storybook.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.