Vite: CSS Module Options not working

[khuyennguyen7007]

I have created vite.config.js:

module.exports = {
  rollupPluginVueOptions: {
    cssModulesOptions: {
      generateScopedName: '[hash:base64:8]',
    },
  },
}

But when I built my project, CSS class has became something like this: .btn_5c7664d4.

System Info

• vite version: 0.16.6
• Operating System: Ubuntu 18
• Node version: 14

[yyx990803]

This only affects build. Dev time class names are not configurable.

[khuyennguyen7007]

As I said. This issue happened when I built my project. Do I miss something?

[yyx990803]

My bad, fixed in 0ce1eef

[khuyennguyen7007]

Can you test it again? I have been trying to create new project but nothing happen.
package.json

{
  "name": "vite",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "vue": "^3.0.0-beta.14"
  },
  "devDependencies": {
    "@vue/compiler-sfc": "^3.0.0-beta.14",
    "vite": "^0.17.0"
  }
}

HelloWorld.vue

<template>
  <button :class="[style.btn]" @click="increment">{{ state.count }}</button>
</template>

<script>
import style from '../button.module.css'
import { reactive } from 'vue'
export default {
  setup() {
    const state = reactive({
      count: 0
    })
    const increment = () => state.count++
    return {
      state,
      increment,
      style,
    }
  },
}
</script>

button.module.css

.btn {
  background-color: red;
}

vite.config.js

module.exports = {
  rollupPluginVueOptions: {
    cssModulesOptions: {
      generateScopedName: '[hash:base64:8]',
    },
  },
}

And when I built. CSS class still is .btn_5c7664d4 (${local}_${hash_sum(filename)} not [hash:base64:8]).

[underfin]

Sorry for this.Evan you maybe ignore sth.I fixed it.Please wait merge the pr.

[khuyennguyen7007]

Thank you very much @underfin. I will wait for @yyx990803 merge it.

[yyx990803]

That's actually expected behavior because you are passing the option to rollup-plugin-vue only, but you are importing normal CSS from <script/>. Options passed to rollup-plugin-vue only affects <style> tags in SFCs and does not affect plain CSS files, even if it's imported from an SFC.

274 is the wrong fix because that option by design should not affect normal CSS. If we really want to let users configure CSS module class names, there should be a dedicated top-level config that is passed to both compileCss AND rollupPluginVueOptions.

But just curious - why would you even want to configure this? Just for slightly shorter class names in production?

[khuyennguyen7007]

After a few days digged into source code. I founded the solution. Just simply create a postcss.config.js file with generateScopedName options and all things will be fine.

[damianfabian]

THIS IS TOTALLY EDUCATIONAL

I was just trying to check the amazing work that you have been doing with Vite and found myself with a problem, which I end solving (I mean the code works) but I'm not sure if this is the way of using it with Vite. So, I'm asking here to know if someone in the thread can answer this to me.

I was trying to implemente Vite + React + Postcss with modules, in order to make this I create the below files:

PostCss config (postcss.config.js)

module.exports = {
    plugins: {
      precss: {},
      "postcss-modules": {},
      autoprefixer: {},
    },
  };

Button Component

import React from 'react';
import './style.css';
import styles from './style.css.json';

const Button = (props) => {
    return <button className={styles.button}>Otro Button</button>;
}

export default Button;

style.css

.button {
    color: red;
}

.button:hover {
    background: red;
    color: white;
}

This worked in dev and the build export what's suppose to be. But still it seems I'm doing something wrong importing the json directly from the component, I guess that should come from the import of the style itself.

I would appreciate if someone can tell me what I'm doing wrong.

NOTE: I already tried to use react-css-modules but it didn't work, what I did was exporting the component wrapping it with the CSSModules function and passing the styles returned by the import of the css file.

import styles from './styles';
.....
export default CSSModules(Button, styles);

[underfin]

Hope this is helpful for you.
First, change filename of style.css to style.module.css.
Then update import with this.

import styles from './style.module.css';

[jjlorenzo]

This is what I'm using

import type { UserConfig } from "vite"

const postcssModulesConfig = {
  generateScopedName: "[name]-[local]-[hash:8]",
  localsConvention: null,
}

export default {
  // ...
  rollupPluginVueOptions: {
    cssModulesOptions: postcssModulesConfig,
  },
  cssModuleOptions: postcssModulesConfig,
  // ...
} as UserConfig

With both invocations I got the same results

<style module lang="postcss">
  .appearance-danger {
    background: #de350b;
  }
</style>

<style module lang="postcss">
  /* button.css contains the same previous rule */
  @import "./button.css";
</style>

[woxixiulayin]

Hope this is helpful for you.
First, change filename of style.css to style.module.css.
Then update import with this.

import styles from './style.module.css';

can i use css-modules by import a .less file? not change to .module.less?i want to use vite in a legacy project with amount of .less file, not really want to change all the less files.