问题
Anyone have success setting up a project using VueJS, PostCss, and Tailwind with component development in Storybook?
I've gotten this far:
- New
vue
project (vue-cli 3.0.5
) - @storybook/vue (4.0.0-alpha.25)
- tailwindcss (0.6.5)
- Create component using
<style lang="postcss"> ... </style>
- Use Tailwind
@apply
within style block to apply utility classes to component
The issue I run into is that any components I create stories for using lang="postcss"
fail during compilation when running storybook.
I tried adding a custom webpack
config which stops the errors but none of my components is styled still.
const path = require('path')
module.exports = {
module: {
rules: [
{
test: /\.postcss$/,
loaders: ["style-loader", "css-loader", "postcss-loader"],
include: path.resolve(__dirname, '../')
}
]
}
}
I've also tried importing my app.postcss
(which imports tailwind) within the stories.js
file itself to no avail. Any help would be appreciated.
回答1:
I've got a fully working example of Svelte + TailwindCSS + Storybook in this github repo https://github.com/jerriclynsjohn/svelte-storybook-tailwind
But Integrating should be very much similar:
- Once TailwindCSS is integrated with your Vue project, then follow on.
- Add a custom
webpack.config.js
in your.storybook
folder and add the following:
const path = require('path');
module.exports = ({ config, mode }) => {
config.module.rules.push({
test: /\.css$/,
loaders: [
{
loader: 'postcss-loader',
options: {
sourceMap: true,
config: {
path: './.storybook/',
},
},
},
],
include: path.resolve(__dirname, '../storybook/'),
});
return config;
};
- Create a
postcss.config.js
in your.storybook
folder with the following:
var tailwindcss = require('tailwindcss');
module.exports = {
plugins: [
require('postcss-import')(),
tailwindcss('./tailwind.config.js'), //This refers to your tailwind config
require('autoprefixer'),
],
};
- Add a
utils.css
file in your storybook folder
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
- Reference your CSS file in the
<>.stories.js
:
import '../../css/utils.css';
I really recommend you refer to the implementation in the github repo, it also has things that are specific to Storybook. (Github)
回答2:
I've never used tailwindCSS or postCSS (explicitly) before, so I decided to take this as an opportunity to learn to setup/configure both of these.
You can find a complete example with Tailwind-styled components in storybook here: https://github.com/gurupras/vuejs-postcss-tailwind-with-storybook
Steps
- Set up VueJS project:
vue create vue-postcss-tailwind-storybook
- Install and initialize tailwindCSS
npm install tailwindcss
./node_modules/.bin/tailwind init
(generatestailwind.config.js
)
- Update postcss.config.js to contain the following:
module.exports = {
plugins: [
require('tailwindcss')('tailwind.config.js'),
require('autoprefixer')()
]
}
- Add Vue storybook plugin
vue add storybook
- Add a CSS file containing the tailwind directives (e.g.
src/style/tailwind.css
)
@tailwind base;
@tailwind components;
@tailwind utilities;
- optional Add
import '@/style/tailwind.css'
to yourmain.js
to ensure that they're available to all parts of your app - Create your component
- I'm going to assume the following component exists:
src/components/alert.vue
- I'm going to assume the following component exists:
- Set up your story
src/stories/alert.stories.js
/* eslint-disable import/no-extraneous-dependencies */
import { storiesOf } from '@storybook/vue'
// You need to import this once
import '@/style/tailwind.css'
import Alert from '@/components/alert.vue'
storiesOf('Alert', module)
.add('with text', () => ({
components: { Alert },
template: '<Alert text="Test alert" :show-close="true"/>'
}))
- Run storybook
npm run storybook:serve
- Develop your component on storybook while having tailwindCSS available!
Hope this helps with your setup. Meanwhile, I'm going to read up and see how TailwindCSS can help me create better components!
回答3:
Working solution as a boilerplate project repository
During the past few months I've had problems configuring Storybook with Vue, however I've got past those problems and am sharing here a working boilerplate project repository with your specific requirements plus some extras.
The bounty offered to this question ask for an up-to-date solution. The thing with the latest Storybook versions 5.2 and 5.3, which entered beta just a few days ago, is that there have been two new story syntax formats coming up soon: Component Story Format (CSF) and MDX Syntax.
Storybook 5.3 finally brings multi-framework support for these formats, as well as an initial release of the long anticipated Storybook Docs addon.
However, as opt-in formats / features these are NOT configured in the repo currently. I can supply additional setups in separate branches if needed.
So here is the working boilerplate project repository with Storybook 5.3 pre-release beta version using Tailwind CSS.
The project is configured with Vue CLI 4 and TypeScript along with Composition API functional component format, as future-proofing for the upcoming Vue 3.0 release targeted at the end Q1/2020.
Note about PostCSS and importing styles
The main thing wrong with the question's setup is that PostCSS is not a language but rather a tool for transforming CSS with JavaScript, and Vue CLI is already configured using PostCSS internally.
Also what was missing from the question and the previous answers is that styles needs to be imported not only in the app's main.js
/ main.ts
file, but also in Storybooks's main config.js
file.
Initial setup steps
# Check if Vue CLI is globally installed
vue --version
# If so, and if it's version is 3.x, uninstall it
npm uninstall -g @vue/cli
# OR if it was installed with Yarn
yarn global remove @vue/cli
# Need to use NPM insted of Yarn because in a later step
# we are installing a forked package from Github repo
# and it was not possible or as straightforward with Yarn.
# Install currently newest Vue CLI version 4
npm install -g @vue/cli
# Create app
vue create boilerplate-ts-vue-storybook-tailwind-postcss --packageManager npm
# Project bootstrapping options chosen for the project
◉ Babel
◉ TypeScript
◯ Progressive Web App (PWA) Support
◯ Router
◯ Vuex
◉ CSS Pre-processors
◉ Linter / Formatter
◉ Unit Testing
◯ E2E Testing
Vue CLI v4.0.5
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, CSS Pre-processors, Linter, Unit
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
# Go into the directory just created
cd boilerplate-typescript-vue-storybook-tailwind-postcss
# Add Vue Cli Storybook plugin from a forked repo with Storybook 5.3.0-beta.2
npm install -D git+https://git@github.com/ux-engineer/vue-cli-plugin-storybook.git#v0.6.2
# Run the plugin's installer
vue add storybook --packageManager npm
Project configurations and the rest of the steps
Rest of the changes made can be looked up from the repo's commit history.
Resources
For setting up Tailwind with Vue I'd recommend following Markus Oberlehner's fine article series on the topic:
Setting up Tailwind CSS with Vue.js
Removing unused CSS from Tailwind with PurgeCSS
Reusable Functional Vue.js Components with Tailwind CSS
Thoughts about Utility-First CSS Frameworks
Adam Wathan - Tailwind CSS Best Practice Patterns
来源:https://stackoverflow.com/questions/53027576/how-to-configure-vuejs-postcss-tailwind-with-storybook