How to get transformed CSS from SASS file?

[sergeyt]

import styles "./example.scss?raw" will return original SASS code. Is it possible to get transformed CSS without writing a new plugin?

[wre232114]

what's in your farm.config.ts? scss will be transformed to css after @farmfe/plugin-sass in transform hook

[sergeyt]

my config is:

import { defineConfig } from "@farmfe/core";

export default defineConfig({
  plugins: [
    "@farmfe/plugin-react",
    [
      "@farmfe/plugin-sass",
      {
        style: "expanded",
      },
    ],
  ],
});

I have a test scss file:

.container {
  background-color: red;

  &.yellow {
    background-color: yellow;
  }
}

When I import scss file like:

import styleString from "./test.module.scss?raw";

console.log(styleString);

it will print untransformed scss code as is. Is there a way to get transformed CSS code so it can be injected to Shadow DOM element?

If I import scss file like:

import styles from "./test.module.scss";

console.log(Object.keys(styles));

it will print only "container". In my case It would be nice if @farmfe/plugin-sass can provide a transformed CSS as additional exported field in the css module. This way I might try to migrate existing codebase from webpack where we use to-string-loader.

[wre232114]

You may need to write a plugin to support this. a plugin that executes after the plugin sass and return the transformed css