I'm trying to use Tailwind, React (CRA), and Storybook but my current setup is throwing this error. I'm using TypeScript on top of Create React App.
src/index.css Unknown word
> 1 | var api = require("!../node_modules/@storybook/addon-postcss/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
| ^
2 | var content = require("!!../node_modules/@storybook/addon-postcss/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].use[1]!../node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].use[2]!./index.css");
.storybook/main.js
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
"@storybook/preset-create-react-app",
{
name: '@storybook/addon-postcss',
options: {
cssLoaderOptions: {
// When you have splitted your css over multiple files
// and use @import('./other-styles.css')
importLoaders: 1,
},
postcssLoaderOptions: {
// When using postCSS 8
implementation: require('postcss'),
},
},
},
],
"framework": "@storybook/react",
"core": {
"builder": "webpack5"
}
}
.storybook/preview.js
import "../src/index.css"
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
}
relative devDependencies, I am also using ESLint but I don't think that'd cause any issues? If so I will edit to add the ESLint dependencies I have.
"devDependencies": {
"@storybook/addon-actions": "^6.5.9",
"@storybook/addon-essentials": "^6.5.9",
"@storybook/addon-interactions": "^6.5.9",
"@storybook/addon-links": "^6.5.9",
"@storybook/addon-postcss": "^2.0.0",
"@storybook/builder-webpack5": "^6.5.9",
"@storybook/manager-webpack5": "^6.5.9",
"@storybook/node-logger": "^6.5.9",
"@storybook/preset-create-react-app": "^4.1.2",
"@storybook/react": "^6.5.9",
"@storybook/testing-library": "0.0.13",
"tailwindcss": "^3.0.23",
"webpack": "^5.70.0"
}