docusaurus-plugin-less

2023年02月20日

柏拉文

越努力，越幸运

前言

docusaurus-plugin-less 插件让docusaurus支持.less文件的打包编译，同时支持UI组件的主题定制。

一、编写

module.exports = (context, options) => {
  console.log(context);
  console.log(options);
  return {
    name: 'docusaurus-plugin-sass',
    configureWebpack(context, isServer, utils) {
      const { getStyleLoaders } = utils;
      const isProd = process.env.NODE_ENV === 'production';
      return {
        module: {
          rules: [{
            test: /\.less$/,
            oneOf: [{
              test: /\.module\.less$/,
              use: [
                ...getStyleLoaders(isServer, {
                  modules: {
                    localIdentName: isProd
                      ? `[local]_[hash:base64:4]`
                      : `[local]_[path][name]`,
                    exportOnlyLocals: isServer,
                  },
                  importLoaders: 2,
                  sourceMap: !isProd,
                }), {
                  loader: 'less-loader',
                  options: {
                    lessOptions: options
                  }
                }
              ]
            }, {
              use: [
                ...getStyleLoaders(isServer), {
                  loader: 'less-loader',
                  options: {
                    lessOptions: options
                  }
                }
              ]
            }]
          }]
        }
      };
    }
  };
};

通过上面编写的docusaurus-plugin-less插件，可以得知在Plugins编写函数中可以得到的信息为:

context 得到了 docusaurus.config.js 中的配置信息

{
  siteDir: 'D:\\bolawen\\blog',
  generatedFilesDir: 'D:\\bolawen\\blog\\.docusaurus',
  siteConfig: {
    title: '柏拉文',
    tagline: '越努力，越幸运',
    url: 'https://bolawen.com',
    baseUrl: '/blog/',
    onBrokenLinks: 'ignore',
    onBrokenMarkdownLinks: 'ignore',
    favicon: 'img/favicon.ico',
    organizationName: 'bolawen',
    projectName: 'bolawen.com',
    presets: [ [Array] ],
    plugins: [ [Array] ],
    themeConfig: {
      navbar: [Object],
      footer: [Object],
      algolia: [Object],
      prism: [Object],
      colorMode: [Object],
      docs: [Object],
      metadata: [],
      hideableSidebar: false,
      tableOfContents: [Object]
    },
    baseUrlIssueBanner: true,
    i18n: { defaultLocale: 'en', locales: [Array], localeConfigs: {} },
    onDuplicateRoutes: 'warn',
    staticDirectories: [ 'static' ],
    customFields: {},
    themes: [],
    titleDelimiter: '|',
    noIndex: false
  },
  siteConfigPath: 'D:\\bolawen\\blog\\docusaurus.config.js',
  outDir: 'D:\\bolawen\\blog\\build',
  baseUrl: '/blog/',
  i18n: {
    defaultLocale: 'en',
    locales: [ 'en' ],
    currentLocale: 'en',
    localeConfigs: { en: [Object] }
  },
  ssrTemplate: undefined,
  codeTranslations: {}
}

options 得到了 Plugins 中配置的第二个参数项

{
  modifyVars: {
    'primary-color': '#25C2A0',
    'link-color': '#25C2A0',
    'border-radius-base': '2px'
  },
  javascriptEnabled: true,
  id: 'default'
}

docusaurus 的生命周期中有一个configureWebpack钩子函数，通过在configureWebpack添加less-loader来完成插件的编写

二、调用

docusaurus-plugin-less插件的调用:

const DocusaurusPluginLess = require("./docusaurus-plugin-less");
/** @type {import('@docusaurus/types').PluginConfig[]} */
module.exports = [
  [DocusaurusPluginLess, {
    modifyVars: {
      'primary-color': '#25C2A0',
      'link-color': '#25C2A0',
      'border-radius-base': '2px',
    },
    javascriptEnabled: true,
  }]
];

一、编写​

二、调用​

一、编写

二、调用