ts nuxt storybookの構築
- Nuxt.js 2.14.6
- TypeScript 4.0.5
- Storybook 6.1.10
- @nuxtjs/tailwindcss: 3.1.0
TypeScriptで書かれたVueコンポーネントを使う
module.exports = {
webpackFinal: async (config) => {
+ config.module.rules.push({
+ test: /\.ts$/,
+ exclude: /node_modules/,
+ use: [
+ {
+ loader: 'ts-loader',
+ options: {
+ appendTsSuffixTo: [/\.vue$/],
+ transpileOnly: true,
+ },
+ },
+ ],
+ })
return config
},
}TailwindCSSを使う
.storybook/main.js
module.exports = {
webpackFinal: async (config) => {
+ config.module.rules.push({
+ test: /\.css$/,
+ exclude: /node_modules/,
+ use: [
+ {
+ loader: 'postcss-loader',
+ options: {
+ ident: 'postcss',
+ plugins: [require('tailwindcss')('./tailwind.config.js')],
+ },
+ },
+ ],
+ })
+
+ config.module.rules.push({
+ test: /\.scss$/,
+ exclude: /node_modules/,
+ use: [
+ {
+ loader: 'postcss-loader',
+ options: {
+ ident: 'postcss',
+ plugins: [require('tailwindcss')('./tailwind.config.js')],
+ },
+ },
+ {
+ loader: 'sass-loader',
+ },
+ ],
+ })
return config
},
}.storybook/preview.js
+ import './tailwind.css'.storybook/tailwind.css
+ @import 'tailwindcss/base';
+ @import 'tailwindcss/components';
+ @import 'tailwindcss/utilities';共通のCSSを読み込む
.storybook/preview.js
+ import '~/assets/style/common.css'