Why Rslib transform less\scss to css in bundless?

[yee94]

Hello team,

I'd like to understand the rationale behind transforming Less/SCSS to CSS in bundless mode. Currently, when using rslib in bundless mode, it still processes Less/SCSS files into CSS.

Some questions I have:

What's the main reason for this design decision?
Would it make more sense to skip the CSS preprocessing in bundless mode and let developers handle it with their preferred tools?
Are there specific use cases or developer experiences that benefit from this approach?
I believe understanding this design choice would help me better utilize rslib in my projects.

Thanks for any insights you can provide!

[fi3ework]

The component library is easy to adopt because it does not require the app to configure a toolchain to use Less or Sass. However, providing Less or Sass files is also an option, as seen in antd 4.x.

In summary, the differences between using CSS and Less are:

• CSS: Simplifies app configuration and is ready to use out of the box, but it does not support preprocessor capabilities.
• Less/Sass: Makes app configuration more complex, slows down build speed, but offers customization through preprocessors.

In our case, we currently only provide CSS, which is a simpler and more universal option.

[chenjiahan]

Rslib provides redirect.style and output.copy configurations, this can be used to keep .scss files and references.

export default defineConfig({
  source: {
    entry: {
      index: ['./src/**'],
    },
  },
  lib: [
    {
      format: 'esm',
      bundle: false,
      // Turn off the redirect of the style file
      redirect: {
        style: false,
      },
    },
  ],
  output: {
    target: 'web',
    // copy .scss files
    copy: [{ from: '**/*.scss', context: path.join(__dirname, 'src') }],
  },
  plugins: [pluginSass()],
});

[NexxLuo]

以上配置依然会对scss文件进行编译处理，需要加上pluginSass({ exclude: /.scss/}) 以及 assetsInclude: /\.scss$/ 。不知有没有好的方式可以避免

[Timeless0911]

Using glob pattern to exclude scss file from source.entry. We will add a new chapter to introduce the use of CSS in website in the near future.