Vue Styleguidistで一般的なスタイルを加える方法

仕事では、最近我々はvue Styleguidist , VueのVueリトル弟react-styleguidist , また、次のようにコンポーネントのスタイルを整理します.

コンポーネント固有のスタイルは[ComponentName].vue ファイル

すべての一般的なスタイル(色、タイポグラフィなど)がジェネリックの中にある間styles.scss ファイル.

最初の(悪い)考え
我々はStyleGuidistアプリではなかったが、代わりに“普通の”Vueアプリでは、我々は@import 最も高いコンポーネントのすべての一般的なスタイルでApp.vue :

// App.vue

<template>
  <div id="app">
    ...
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style lang="scss">
// generic styles
@import 'styles/styles.scss'
</style>

このようにして、すべてのコンポーネントがジェネリックスタイルを継承します.
しかし、styleguidistプロジェクトでは、このような高レベルのVueコンポーネント😩
このようにしてジェネリックファイルをインポートする場合は、以下のようにすべてのコンポーネントに追加する必要があります.

// components/MyComponent.vue

<template>
  ...
</template>

<script>
export default {
  name: 'MyComponent',
}
</script>

<style lang="scss">
// generic styles
@import 'styles/styles.scss'

// my components custom styles
.c-my-component {
  background: red;
}

...
</style>

このような素晴らしいアイデアではない!🧐

二番目(私は思う)考え
多分、それをするより良い方法があります、しかし、瞬間のために、我々はこれで行きます!😅
追加vue.conifg.js StyleGuidistプロジェクトへのファイル、我々はStyleguidistに伝えることができますsass-loader 実際のコンポーネントの前にどのスタイルコンテンツを追加するか<style> コンテンツ.これはsass-loader additionalData オプション

// vue.config.js

module.exports = {
  css: {
    sourceMap: true,
    loaderOptions: {
      scss: {
        additionalData: `
        @import "assets/styles/styles.scss";
        `,
      },
    },
  },
}

🧨 !important

In these examples I have assumed that we are using SASS (.scss) files and not simple CSS files.
The sass-loader node package I mentioned before is already installed in our project because we wrote styles in SASS using the <style lang="scss"> syntax.

⚡️ ボーナスチップ
我々がちょうど加えた時からvue.config.js ファイルも追加 postcss 設定

const postcssNormalize = require('postcss-normalize')
const postcssPresetEnv = require('postcss-preset-env')

module.exports = {
  css: {
    sourceMap: true,
    loaderOptions: {
      scss: {
        additionalData: `
        @import "assets/styles/styles.scss";
        `,
      },
      postcss: {
        plugins: () => [
          postcssPresetEnv({
            features: {
              'logical-properties-and-values': {
                dir: 'ltr',
              },
            },
          }),
          postcssNormalize(),
        ],
      },
    },
  },
}

ET Vil il!🇫🇷
この設定で

コンポーネント固有のスタイルは[ComponentName].vue ファイル

すべてのジェネリックスタイルがジェネリックの中にある間styles.scss ファイル

あなたがVue Styleguidistコンポーネントで一般的なスタイルをインポートするためのより良い方法を見つけた場合は私に知らせてください!😇