滚动并使用从 styles.scss 导入的样式可以吗？

Question

我想在 滚动: (不是webpack)。

一个非常人为的例子。

import React, { memo } from 'react';
import styles from './styles.scss'; // <-- THIS IS EMPTY

const Button = () => {
  return (
    <div className={styles.buttoncontainer}> // no styles. 
      test
    </div>
  );
};

注意: 如果我只是做: import '.styles.scss'... 那么我可以使用 'buttoncontainer'. 但我想使用 styles.buttoncontainer。

我的rollup配置中，我想使用style.buttoncontainer。

import peerDepsExternal from "rollup-plugin-peer-deps-external";
import resolve from "rollup-plugin-node-resolve";
import typescript from "rollup-plugin-typescript2";
import sass from "rollup-plugin-sass";
import commonjs from "rollup-plugin-commonjs";
import copy from "rollup-plugin-copy";

import packageJson from "./package.json";

export default {
  input: "src/index.ts",
  output: [
    {
      file: packageJson.main,
      format: "cjs",
      sourcemap: true
    },
    {
      file: packageJson.module,
      format: "esm",
      sourcemap: true
    }
  ],
  plugins: [
    peerDepsExternal(),
    resolve(),
    commonjs(),
    typescript({ useTsconfigDeclarationDir: true }),
    sass({
      insert: true
    })
  ]
};