如何在Rollup的JavaScript中使用CSS变量？求类似css-variables-loader的插件

你可以用以下几种Rollup插件来实现类似css-variables-loader的功能：

1. rollup-plugin-css-variables #

这个插件专门用来提取CSS变量并导出为JS对象，用法直接：

• 安装依赖：

  npm install rollup-plugin-css-variables --save-dev
  

• 在Rollup配置文件中添加插件：

  import cssVariables from 'rollup-plugin-css-variables';
  
  export default {
    input: 'src/index.js',
    output: {
      file: 'dist/bundle.js',
      format: 'esm'
    },
    plugins: [
      cssVariables({
        include: '**/*.css',
        exclude: 'node_modules/**'
      })
    ]
  };
  

• 在JS文件中导入并使用CSS变量：

  import vars from './variables.css';
  console.log(vars['--primary-color']);
  

2. 自定义Rollup插件配合PostCSS #

如果需要更灵活的配置，可结合rollup-plugin-postcss和PostCSS的postcss-custom-properties插件实现：

• 安装依赖：

  npm install rollup-plugin-postcss postcss postcss-custom-properties --save-dev
  

• 配置Rollup：

  import postcss from 'rollup-plugin-postcss';
  import postcssCustomProps from 'postcss-custom-properties';
  
  export default {
    input: 'src/index.js',
    output: {
      file: 'dist/bundle.js',
      format: 'esm'
    },
    plugins: [
      postcss({
        plugins: [
          postcssCustomProps({
            preserve: false,
            exportTo: './src/vars.js'
          })
        ],
        extract: false
      })
    ]
  };
  

• 导入生成的变量文件使用：

  import vars from './vars.js';
  

3. rollup-plugin-styles #

这是一个功能全面的样式处理插件，支持提取CSS变量到JS：

• 安装依赖：

  npm install rollup-plugin-styles --save-dev
  

• 配置Rollup：

  import styles from 'rollup-plugin-styles';
  
  export default {
    input: 'src/index.js',
    output: {
      file: 'dist/bundle.js',
      format: 'esm'
    },
    plugins: [
      styles({
        modules: {
          getExportedName: (name) => name,
        },
        postcss: {
          plugins: [require('postcss-custom-properties')({ exportTo: true })]
        }
      })
    ]
  };
  

• 在JS中导入使用：

  import { '--primary-color' as primaryColor } from './variables.css';
  

内容的提问来源于stack exchange，提问作者Shubham Chitransh