React+ts+less+ストーリーブックコンポーネントプロジェクト
create-react-app で反応プロジェクトを作成する
Create-react-app はローカルにすでに存在します
ターミナルコマンド、反応プロジェクトを生成するためのスキャフォールディング
create-react-app react-storybook-ts --template typescript
ローカルに create-react-app がありません
ターミナルコマンド、反応プロジェクトを生成するためのスキャフォールディング
npx create-react-app react-storybook-ts --template typescript
プロジェクトをビルドしたら、フォルダーに cd します。
スタイルを少なく設定する (Webpack 設定ファイルを公開する)
この方法では、Webpack構成
ファイルを公開することで構成が少なくなります。
npm run eject
端末のインストールの依存関係
yarn add less less-loader --save-dev
取り出した設定ファイルの下で webpack.config.js を見つけて (webpack 設定ファイル。Webpack のバージョンが異なると名前も異なります。設定ファイルを見つけてください)、関連する
コードを追加します。
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
mode: 'icss',
},
},
'less-loader'
),
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
mode: 'local',
getLocalIdent: getCSSModuleLocalIdent,
},
},
'less-loader'
),
},
具体的な場所は以下の通りです
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
mode: 'icss',
},
},
'sass-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
mode: 'icss',
},
},
'less-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
test: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
mode: 'local',
getLocalIdent: getCSSModuleLocalIdent,
},
},
'sass-loader'
),
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
mode: 'local',
getLocalIdent: getCSSModuleLocalIdent,
},
},
'less-loader'
),
},
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
// This loader doesn't use a "test" so it will catch all modules
// that fall through the other loaders.
ストーリーブックをプロジェクトに追加する
ストーリーブックをダウンロードして初期化する
端末コマンド
npx storybook init
ランスタートストーリーブック
ダウンロードが成功すると、ターミナルコマンドでストーリーブックが開始されます。
yarn storybook
注: このバージョンのチュートリアルでは、yarn を使用してほとんどのコマンドを実行します。既に Yarn がインストールされているが、代わりに npm を使用したい場合は、上記のコマンドに --use-npm フラグを追加するだけで、CRA と Storybook の両方がそれに基づいて初期化されます。このチュートリアルを進めるときに、対応する npm にコマンドを適応させることを忘れないでください。
ストーリーブック構成が少ない
プロジェクトの .storybook フォルダーにある mian.ts ファイルが
図に示されており、
変更する必要がある mian.ts コードは次のとおりです。
import type {
StorybookConfig } from "@storybook/react-webpack5";
const path = require("path");
const config: StorybookConfig = {
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-onboarding",
"@storybook/addon-interactions",
],
framework: {
name: "@storybook/react-webpack5",
options: {
},
},
docs: {
autodocs: "tag",
},
// 这一个要添加
webpackFinal: async (config: any) => {
config.module.rules.push({
test: /\.less$/,
use: [
{
loader: "style-loader" },
{
loader: "css-loader", options: {
modules: false } },
{
loader: "less-loader",
options: {
lessOptions: {
javascriptEnabled: true } },
},
],
});
return config;
},
};
export default config;
現時点では、コンポーネントを構成するときに、less ファイルを参照してもエラーは報告されません。
ストーリーブック構成のエイリアス
main.ts ファイルのコードは次のとおりです。
import type {
StorybookConfig } from "@storybook/react-webpack5";
const path = require("path");
const config: StorybookConfig = {
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-onboarding",
"@storybook/addon-interactions",
],
framework: {
name: "@storybook/react-webpack5",
options: {
},
},
docs: {
autodocs: "tag",
},
// 这一个要添加
webpackFinal: async (config: any) => {
config.module.rules.push({
test: /\.less$/,
use: [
{
loader: "style-loader" },
{
loader: "css-loader", options: {
modules: false } },
{
loader: "less-loader",
options: {
lessOptions: {
javascriptEnabled: true } },
},
],
});
return {
...config,
// 添加 @ 指向src目录
resolve: {
...config.resolve,
alias: {
...config.resolve.alias,
"@": path.join(__dirname, "../src/"),
},
},
};
},
};
export default config;