Je veux ajouter le vent arrière au livre de contes. Afin que les histoires rendent tout comme elle rendra sur le Web.
J'ai utilisé créer le projet de projet-App-App-App - Typemplate TypeScript pour créer le projet.
Ensuite Pour installer le vent arrière, j'ai suivi ce https://tailwindcss.com/docs/guides/create- react-app Instruction de la documentation du vent arrière
Une fois que je l'ai terminé, j'ai exécuté le code npm sb init . Ce qui s'est assuré que le livre de contes était en cours.
Maintenant, je dois raconter le livre de contes pour utiliser Tailwindcss pour le style. Mais je ne sais pas comment.
Toutes les autres réponses que j'ai vues indiquent à modifier les fichiers postcsss.config.js .
Mais j'ai suivi ceci https://tailwindcss.com/docs/guides/create-react-app Je n'ai même pas eu à créer un fichier postcs.config.js. Je suis donc confus à ce qu'il faut faire maintenant.
Pour plus de clarté, j'inclurai un fichier de configuration ci-dessous.
craco.config.js
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
4 Réponses :
Vous êtes presque là.
La pièce manquante de votre configuration est d'ajouter une configuration WebPack pour appliquer le vent arrière à PostCSS-chargeur :
const path = require('path')
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: async (config) => {
config.module.rules.push({
test: /\.css$/,
use: [
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
},
},
],
include: path.resolve(__dirname, '../'),
})
return config
},
}
Peut-être devriez-vous créer un passe-partout pour cela
Oups, je devais juste ajouter importer "../ src / index.css" dans .storybook / préview.js 😁
@sudo_kaizen J'ai ajouté un système de conception de livres de contes à un passe-partout que je maintiens, peut-être que cela pourrait aider
Quelle version de postcss-chargedeur dois-je utiliser avec une bibliothèque React? J'ai exécuté npm installer PostCSS-chargedeur mais j'obtiens une erreur dans la fonction chargeur de postcss-chargedeur / dist / index.js disant que < Code> this.getOptions n'est pas une fonction .
consultez ceci pour les versions plus récentes postcss
Comment puis-je utiliser Tailwind et PostCSS sans WebPack? Utilisation également de Rollup pour exporter la bibliothèque.
J'ai également dû ajouter Importer "../ src / index.css" dans .storybook / préview.js comme @aladouagi pour le faire fonctionner.
J'ai dû importer le CSS et modifier le champ Options comme suit: Options: {postcsSoptions: {plugins: [require ("tailwindcss"), require ("autoprefixer")]}} voir ce lien Pour plus de détails, et désolé pour le formatage!
Confirmé, comme @JohnmcCollum, je l'ai fait fonctionner après avoir changé à Nested postcsoptions et à se débarrasser de identifère . Pourriez-vous mettre à jour cette réponse pour 2022?
La réponse était bonne, mais dans la dernière CRA, je dois configurer comme ceci:
config.module.rules.push({
test: /\.css$/,
use: [
{
loader: "postcss-loader",
options: {
// HERE: OPTIONS
postcssOptions: {
plugins: [require("tailwindcss"), require("autoprefixer")],
},
},
},
],
include: path.resolve(__dirname, "../"),
});
Cela n'a pas fonctionné pour moi dans la dernière ARC. La réponse acceptée fonctionne bien.
Storybook recommande @ storybook / addon-Postcss pour personnaliser le PostCSS Config à partir de maintenant (au lieu de compter sur la personnalisation du POSTCSS-chargedeur ):
Ajoutez l'addon postcss à votre installation
// .storybook/preview.js import '../src/styles.css';
Créez le postcss.config.js Dans la racine du projet
// .storybook/main.js
module.exports = {
...
addons: [
...
{
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'),
},
},
},
],
};
Ajoutez le plugin à votre .storybook / main.js
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
Importez votre fichier CSS dans le .storybook / aperview.js
npm i -D @storybook/addon-postcss # or yarn add -D @storybook/addon-postcss
Cela n'a pas fonctionné pour moi pour une raison quelconque. FWIW, j'utilise PostCSS7 car cela est recommandé dans la page d'installation sur le vent arrière. `` `Syntaxerror (1: 1) mot inconnu> 1 | var api = require ("! ../ node_modules / style-woader / dist / runtime / injectst ylesintostyletag.js" ); | ^ 2 | var contenu = require ("!! ../ node_modules / css-woader / dist / cjs.js ?? ref--10-1! ../ node_modules / pos tcss-woader / dist / cjs .js! ./index.css "); ``
Tailwind nécessite PostCSS 8 (pas 7) comme indiqué dans les documents: tailwindcss.com/ docs / installation # install-tailwind-via-npm
Ça ne fonctionne pas pour moi
L'ARC ne prend pas en charge PostCSS 8, vous devez donc installer une construction de compat PostCSS 7: tailwindcss.com/docs/guides/create-react-app
@CGAT Comment installer une construction compatible PostCSS 7?
Le lien CSS à vent arrière ci-dessus a utilisé pour décrire comment procéder (ils avaient une construction de compat PostCSS 7 spéciale que vous installeriez. On dirait que les choses auraient pu changer et potentiellement PostCSS 8 est désormais prise en charge.
Je n'ai pas pu faire fonctionner Addon-Postcss en 2022, mais la configuration webPackFinal de la réponse votée supérieure a fonctionné. J'ai continué à obtenir des erreurs de "mot inconnu" comme github.com/storybookjs/addon-postcss/issues / 33 Quelle que soit la configuration que j'ai essayée, et d'accord avec le commentaire là-bas qu'il est essentiellement abandonné (des tonnes de problèmes négligés et aucun engagement en 16 mois).
similaire à la réponse de House, mais voici une solution si vous ne voulez pas avoir un postcss.config.js supplémentaire pour seulement quelques lignes ou si vous voulez utiliser TypeScript dans tout (comme Le chargeur ne ramasse pas les postcsss.config.ts) /* tailwind.config.ts */
import type { TailwindConfig } from 'tailwindcss/tailwind-config';
export const theme: TailwindConfig['theme'] = {
// theme options
}
// other options
/* .stories/main.ts */
import postcss from 'postcss';
import * as tailwindcss from '../tailwind.config';
import type { StorybookConfig } from '@storybook/react/types';
export const addons: StorybookConfig['addons'] = [
// other addons,
{
name: '@storybook/addon-postcss',
options: {
postcssLoaderOptions: {
implementation: postcss,
postcssOptions: {
plugins: {
tailwindcss, // or you can nest your options entirely here
autoprefixer: {
// autoprefixer options
},
},
},
},
},
},
];
npm i -D @storybook/addon-postcss
yarn add -D @storybook/addon-postcss