Can css be styleInjected in library mode? #1579

gwsbhqt · 2021-01-18T10:13:16Z

Is your feature request related to a problem? Please describe.
I'm using vite to build a library, and sometimes the library requires a dozen lines of simple styles. After building, a style.css file will be generated. But I think it is not necessary to generate two files, it may be enough to generate only one file. Is there any way to add style.css to the target js file?

The styleInject helper function is used in rollup and babel plug-ins. In iife/umd mode, the style is automatically injected when library loaded.

yyx990803 · 2021-01-20T03:01:55Z

The problem is injecting the style assumes a DOM environment which will make the library SSR-incompatible.

If you only have minimal css, the easiest way is to simply use inline styles.

gwsbhqt · 2021-01-20T09:13:24Z

Generally, existing style libraries are used in a dom environment.
Now I am using ts/vite/preact/module less to build a library. If I use the inline style, then there is no way to use modular less.
Maybe you are right. It may be a better choice to directly use inline styles, but still hope to provide more library mode options.
Thanks for your reply.

eikooc · 2021-01-26T09:57:24Z

I know you already answered that assuming a DOM environment will make the library SSR-incompatible, but maybe it would be possible to provide an option for enabling inlining of the styles?

I have made a reproduction project showing a component being created in the ui-components project then after being built and installed in the separate project not including any styles. vite-library-style-repro

@yyx990803 how would you suggest making a library of components that can be included without importing a global styles.css, possibly including styles that are unneeded or clashing with other styles?

shanlh · 2021-02-03T08:24:08Z

In pass, I use rollup build vue2 library, I found that the style will auto inject to "<head></head>"

richardtallent · 2021-02-08T01:05:05Z

I've been running into this for the past week and pulling my hair out, as this is not a documented behavior. I was about to file an issue (repro: https://github.com/richardtallent/vite-bug-cssnotimported) and just came across this one.

Requiring non-SSR users to manually import a CSS file to get a component's default style to work is suboptimal DX, and an unfamiliar surprise for anyone accustomed to importing components under Vue 2.

Inline CSS is not a viable alternative, at least for a non-trivial component. Inline CSS also creates additional challenges for a user who wants to override the default style.

Is there a middle ground here to help developers who want to support the SSR use case, without making non-SSR users jump through an extra hoop to style each component they use?

fuxingloh · 2021-02-08T01:56:09Z

@richardtallent Sharing my experience here, I moved to inline all CSS and moved all <template> into render function.

I was following this issue for over 2 weeks now, I was stumbled upon how to effectively inject style into the head. Effectively for DX, requiring the user to import style was suboptimal for my use case. By comparison Vue 2 was much easier to install for the users than Vue 3, so this was a no go for me.

My trivial library target SSR/SSG/SPA and is e2e tested on all 3 modes which makes it an extra headache to move to Vue 3 in Vite. There was also some quirks with head injected css for my use case so inlining style was not something I was entirely against. (In fact I wanted to for consistency sake.)

For inline CSS overriding, what I did to allow default style override is to explicitly state how to with ::v-deep and !important in the documentation. reference

.some-component ::v-deep(.v-hl-btn) {
  width: 8px !important;
}

Not all css can be inlined directly (pseduo, media query, '>' and many more), which require me to rewrite my entire component into render function. reference

export default defineComponent({
  render() {
    return h('div', {
      class: 'vue-horizontal',
      style: {
        position: 'relative',
        display: 'flex',
      }
    }, [...])
  }
})

I hope this helps anyone down this road. For reference: fuxingloh/vue-horizontal#87

richardtallent · 2021-02-08T04:59:14Z

Thanks @fuxingloh! This sounds like an interesting workaround, but I don't want to give up on writing idiomatic SFCs (with template and style blocks) and allowing users to override styles with standard CSS. However, I have bookmarked your component since I like how you've done your testing and I hope to learn from it!

ziping-li · 2021-02-27T13:13:36Z

I am using the style-inject now. I wonder if this problem has been solved? Eventually a css file will be generated, and the style code is also included in js.

import { computed, defineComponent, ref } from 'vue';
import { queryMedia } from '@convue-lib/utils';
import styleInject from 'style-inject';
import css from './index.less';

styleInject(css);

export default defineComponent({
  name: 'Container',
  props: {
    fuild: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { slots }) {
    const media = ref('');
    queryMedia((data: string) => (media.value = data));
    const className = computed(() => ({
      'convue-container': true,
      fuild: props.fuild,
      [media.value]: true,
    }));

    return () => <div class={className.value}>{slots.default?.()}</div>;
  },
});

https://github.com/ziping-li/convue-lib/blob/master/packages/container/src/index.tsx

hiendv · 2021-05-14T09:32:40Z

Inlining style won't work with the transition also. Requiring users to explicitly import the style is not really an option. Is there anything we can do to settle down this problem?

gwsbhqt · 2021-08-23T05:08:50Z

@ziping-li @hiendv @aekasitt
I used a method similar to @ziping-li to solve this thorny problem.

// index.ts entry point

import styleInject from 'style-inject'

styleInject('__STYLE_CSS__') // __STYLE_CSS__ is a placeholder pseudo code

// gulpfile.js build script file

const { readFileSync, rmSync, writeFileSync } = require('fs')
const { series } = require('gulp')
const { exec } = require('shelljs')

function readWriteFileSync(path, callback) {
    writeFileSync(path, callback(readFileSync(path, { encoding: 'utf8' })), { encoding: 'utf8' })
}

function readRemoveFileSync(path, callback) {
    callback(readFileSync(path, { encoding: 'utf8' }))
    rmSync(path, { force: true })
}

async function clean() {
    exec('rimraf ./dist ./coverage ./.eslintcache ./.stylelintcache')
}

async function build_library() {
    exec('tsc')
    exec('copyfiles -u 1 ./src/**/* ./dist') // copy style to tsc dist
    exec('vite build')

    readRemoveFileSync('./dist/style.css', css => {
        // __STYLE_CSS__ replace by style.css
        readWriteFileSync('./dist/library.umd.js', js => replace(js, '__STYLE_CSS__', css))
    })
}

exports.build = series(clean, build_library)

// package.json

{
    "scripts": {
        "build": "gulp build"
    }
}

xinyao27 · 2021-09-15T03:06:44Z

I encountered the same problem, css cannot be loaded correctly when building lib mode.

I created a plugin to temporarily solve this problem.

import fs from 'fs'
import { resolve } from 'path'
import type { ResolvedConfig, PluginOption } from 'vite'

const fileRegex = /\.(css)$/

const injectCode = (code: string) =>
  `function styleInject(css,ref){if(ref===void 0){ref={}}var insertAt=ref.insertAt;if(!css||typeof document==="undefined"){return}var head=document.head||document.getElementsByTagName("head")[0];var style=document.createElement("style");style.type="text/css";if(insertAt==="top"){if(head.firstChild){head.insertBefore(style,head.firstChild)}else{head.appendChild(style)}}else{head.appendChild(style)}if(style.styleSheet){style.styleSheet.cssText=css}else{style.appendChild(document.createTextNode(css))}};styleInject(\`${code}\`)`
const template = `console.warn("__INJECT__")`

let viteConfig: ResolvedConfig
const css: string[] = []

export default function libInjectCss(): PluginOption {
  return {
    name: 'lib-inject-css',

    apply: 'build',

    configResolved(resolvedConfig: ResolvedConfig) {
      viteConfig = resolvedConfig
    },

    transform(code: string, id: string) {
      if (fileRegex.test(id)) {
        css.push(code)
        return {
          code: '',
        }
      }
      if (
        // @ts-ignore
        id.includes(viteConfig.build.lib.entry)
      ) {
        return {
          code: `${code}
          ${template}`,
        }
      }
      return null
    },

    async writeBundle(_: any, bundle: any) {
      for (const file of Object.entries(bundle)) {
        const { root } = viteConfig
        const outDir: string = viteConfig.build.outDir || 'dist'
        const fileName: string = file[0]
        const filePath: string = resolve(root, outDir, fileName)

        try {
          let data: string = fs.readFileSync(filePath, {
            encoding: 'utf8',
          })

          if (data.includes(template)) {
            data = data.replace(template, injectCode(css.join('\n')))
          }

          fs.writeFileSync(filePath, data)
        } catch (e) {
          console.error(e)
        }
      }
    },
  }
}

https://github.com/ohbug-org/ohbug-extension-feedback/blob/main/libInjectCss.ts

vitejs/vite#1579 (comment)

ghost · 2021-09-28T03:14:46Z

@chenyueban This completely solved my problem, thanks! Much more elegant than crawling the dependency graph 👍
Have you run into any shortcomings with this approach yet?

tylerrrkd · 2021-10-03T10:22:02Z

@chenyueban Hi, friend. I use your plugin in my lib code, and it doesn't work. And I found difference is that I turned on css.modules and scss. Then I change the Reg to /\.(scss)/, and amazing, vite does not compile css file, but does not inject to js bundle either. Do you have any suggestion? Thank you my friend.

7zf001 · 2021-11-03T10:18:39Z

I encountered the same problem, css cannot be loaded correctly when building lib mode.

I created a plugin to temporarily solve this problem.

import fs from 'fs'
import { resolve } from 'path'
import type { ResolvedConfig, PluginOption } from 'vite'

const fileRegex = /\.(css)$/

const injectCode = (code: string) =>
  `function styleInject(css,ref){if(ref===void 0){ref={}}var insertAt=ref.insertAt;if(!css||typeof document==="undefined"){return}var head=document.head||document.getElementsByTagName("head")[0];var style=document.createElement("style");style.type="text/css";if(insertAt==="top"){if(head.firstChild){head.insertBefore(style,head.firstChild)}else{head.appendChild(style)}}else{head.appendChild(style)}if(style.styleSheet){style.styleSheet.cssText=css}else{style.appendChild(document.createTextNode(css))}};styleInject(\`${code}\`)`
const template = `console.warn("__INJECT__")`

let viteConfig: ResolvedConfig
const css: string[] = []

export default function libInjectCss(): PluginOption {
  return {
    name: 'lib-inject-css',

    apply: 'build',

    configResolved(resolvedConfig: ResolvedConfig) {
      viteConfig = resolvedConfig
    },

    transform(code: string, id: string) {
      if (fileRegex.test(id)) {
        css.push(code)
        return {
          code: '',
        }
      }
      if (
        // @ts-ignore
        id.includes(viteConfig.build.lib.entry)
      ) {
        return {
          code: `${code}
          ${template}`,
        }
      }
      return null
    },

    async writeBundle(_: any, bundle: any) {
      for (const file of Object.entries(bundle)) {
        const { root } = viteConfig
        const outDir: string = viteConfig.build.outDir || 'dist'
        const fileName: string = file[0]
        const filePath: string = resolve(root, outDir, fileName)

        try {
          let data: string = fs.readFileSync(filePath, {
            encoding: 'utf8',
          })

          if (data.includes(template)) {
            data = data.replace(template, injectCode(css.join('\n')))
          }

          fs.writeFileSync(filePath, data)
        } catch (e) {
          console.error(e)
        }
      }
    },
  }
}

https://github.com/ohbug-org/ohbug-extension-feedback/blob/main/libInjectCss.ts

Is there any other way, please? I see that rollup can directly output an esm file and include css.

fnick851 · 2021-11-26T01:31:43Z

I faced the same issue. I wrote a Vue composition function that injects scoped CSS from a string at runtime that uses the same approach as Kremling for React.

It is not a perfect solution, since I imagine the majority of Vue users would prefer to use the standard SFC <style> block, and the solution requires writing a little extra syntax. But it does solve the problem of including CSS in JS. Also it cleans up its CSS when a component is unmounted.

https://github.com/fnick851/vue-use-css

Shinigami92 · 2021-11-26T08:47:25Z

Sorry, that was Kami (my cat)

wxsms · 2021-12-08T08:43:21Z

The problem is injecting the style assumes a DOM environment which will make the library SSR-incompatible.

If you only have minimal css, the easiest way is to simply use inline styles.

What if we just provide a option to import the css file into the bundled js file like this, instead of inject into DOM, will this be more SSR friendly?

// bundled js file (in es format only)
import './style.css';
import { defineComponent, openBlock, createBlock, renderSlot, withScopeId } from "vue";

// ...

And the css import will be handled by the downstream bundler like, webpack, rollup, vite, whatever.

DamonCais · 2023-08-13T09:51:37Z

I encountered the same problem, css cannot be loaded correctly when building lib mode.

I created a plugin to temporarily solve this problem.

import fs from 'fs'
import { resolve } from 'path'
import type { ResolvedConfig, PluginOption } from 'vite'

const fileRegex = /\.(css)$/

const injectCode = (code: string) =>
  `function styleInject(css,ref){if(ref===void 0){ref={}}var insertAt=ref.insertAt;if(!css||typeof document==="undefined"){return}var head=document.head||document.getElementsByTagName("head")[0];var style=document.createElement("style");style.type="text/css";if(insertAt==="top"){if(head.firstChild){head.insertBefore(style,head.firstChild)}else{head.appendChild(style)}}else{head.appendChild(style)}if(style.styleSheet){style.styleSheet.cssText=css}else{style.appendChild(document.createTextNode(css))}};styleInject(\`${code}\`)`
const template = `console.warn("__INJECT__")`

let viteConfig: ResolvedConfig
const css: string[] = []

export default function libInjectCss(): PluginOption {
  return {
    name: 'lib-inject-css',

    apply: 'build',

    configResolved(resolvedConfig: ResolvedConfig) {
      viteConfig = resolvedConfig
    },

    transform(code: string, id: string) {
      if (fileRegex.test(id)) {
        css.push(code)
        return {
          code: '',
        }
      }
      if (
        // @ts-ignore
        id.includes(viteConfig.build.lib.entry)
      ) {
        return {
          code: `${code}
          ${template}`,
        }
      }
      return null
    },

    async writeBundle(_: any, bundle: any) {
      for (const file of Object.entries(bundle)) {
        const { root } = viteConfig
        const outDir: string = viteConfig.build.outDir || 'dist'
        const fileName: string = file[0]
        const filePath: string = resolve(root, outDir, fileName)

        try {
          let data: string = fs.readFileSync(filePath, {
            encoding: 'utf8',
          })

          if (data.includes(template)) {
            data = data.replace(template, injectCode(css.join('\n')))
          }

          fs.writeFileSync(filePath, data)
        } catch (e) {
          console.error(e)
        }
      }
    },
  }
}

https://github.com/ohbug-org/ohbug-extension-feedback/blob/main/libInjectCss.ts

the id and the entry was different in windows.
use "resolve(id)" to compare with "resolve(viteConfig.build.lib.entry)" will be great.

receter · 2023-08-14T09:41:52Z

For anyone interested, this is the solution I ended up with and it works fine for my purpose:

Assuming all your consumers have a bundler setup that can handle CSS, you can use vite-plugin-lib-inject-css to add import statements for the generated CSS to the output JavaScript files.

Importing the CSS rather than injecting it into the DOM has have the advantage that the consumers can further process the CSS styles (such as doing optimizations eg. grouping selectors).

This solution is great for scenarios where your library uses CSS modules but not all consumers do (or consumers have a different style of importing CSS modules).

To make sure not all CSS styles end up in your application, you can split up the bundle. vite-plugin-lib-inject-css will include an import statement to just the mandatory CSS at the beginning of each chunk's output file.

In the Rollup documentation there is a recommended way of doing this:

📘 If you want to convert a set of files to another format while maintaining the file structure and export signatures, the recommended way—instead of using output.preserveModules that may tree-shake exports as well as emit virtual files created by plugins—is to turn every file into an entry point.

You can find a demo repo here: https://github.com/receter/my-component-library

This is my vite configuration:

⚠️Don't forget to add **/*.css to the sideEffects field in your package.json

// vite.config.ts
import { defineConfig } from 'vite'
import { extname, relative, resolve } from 'path'
import { fileURLToPath } from 'node:url'
import { glob } from 'glob'
import react from '@vitejs/plugin-react'
import dts from 'vite-plugin-dts'
import { libInjectCss } from 'vite-plugin-lib-inject-css'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    libInjectCss(),
    dts({ include: ['lib'] })
  ],
  build: {
    copyPublicDir: false,
    lib: {
      entry: resolve(__dirname, 'lib/main.ts'),
      formats: ['es']
    },
    rollupOptions: {
      external: ['react', 'react/jsx-runtime'],
      input: Object.fromEntries(
        // https://rollupjs.org/configuration-options/#input
        glob.sync('lib/**/*.{ts,tsx}').map(file => [
          // 1. The name of the entry point
          // lib/nested/foo.js becomes nested/foo
          relative(
            'lib',
            file.slice(0, file.length - extname(file).length)
          ),
          // 2. The absolute path to the entry file
          // lib/nested/foo.ts becomes /project/lib/nested/foo.ts
          fileURLToPath(new URL(file, import.meta.url))
        ])
      ),
      output: {
        assetFileNames: 'assets/[name][extname]',
        entryFileNames: '[name].js',
      }
    }
  }
})

nicefan · 2023-09-07T03:03:03Z

If you only have minimal css, The easiest way to do use rollupOption configuration:

{
  rollupOption: {
    output: {
        intro: 'import "./style.css";',
    }
  }
}

emosheeep · 2023-09-07T03:08:29Z

If you only have minimal css, The easiest way to do use rollupOption configuration:
{

  rollupOption: {

    output: {

        intro: 'import "./style.css";',

    }

  }

}

hahahaha，can't believe it could be done in this way

receter · 2023-10-10T13:01:49Z

If you only have minimal css, The easiest way to do use rollupOption configuration:
{
  rollupOption: {
    output: {
        intro: 'import "./style.css";',
    }
  }
}

You should probably also add ./style.css to the sideEffects field in your package.json

Without this, when building, Vite would generate a style.css file that would need to be imported by users in the host app, which is not an ideal DX See vitejs/vite#1579

TerkaPrzemyslaw1897 · 2023-11-23T20:52:01Z

When building components using rollup in our project, we used https://www.npmjs.com/package/rollup-plugin-postcss - this automatically inject styles from Vue SFC into the head of the page (per component). Unfortunately, the above plugin does not work with Vite. We have several components that load asynchronously, the styles of these components should also load asynchronously.
Our library is used by an external client directly as a JS script on the external site, so importing styles at the top of the chunks is not an option, we have to inject them.
I haven't found any solution in the entire thread that would meet this condition, is it even possible?

kalnode · 2024-01-19T20:39:30Z

Re: Using sideEffects in package.json

There's a lot of references to using sideEffects in package.json, but AFAIK isn't this a Webpack-specific feature? I use Vite everywhere.

eguzman-tc · 2024-04-10T22:18:45Z

I am using vite with Vue to build a component library with multiple entry points (to enable imports like import { MyInput } from '@orgname/repo-name/inputs' as well as a global css import such as import '@orgname/repo-name/styles'; ). The existing solutions in this thread didn't exactly fit my needs, but between the solutions here and some help from ChatGPT, I was able to arrive at a working solution. It relies on the same mechanism as @emosheeep's npm package where css files are imported at the top of the generated .js files, so the consuming project must have a build process that supports such imports. The difference is that this solution keeps each component's CSS with its JS code while also allowing for a global stylesheet to be generated (for things like fonts that your library relies on). Defining the plugin this way also removes the need to rely on an external package. In particular, this is created with Vue SFC's in mind which use <style lang="scss" scoped>, though perhaps it could be adapted to other frameworks.

With this setup, vite / rollup creates folders in the dist/ directory which broadly mimic the source code directory structure. After the bundles and component js files (e.g. MyComponent.vue.js) are generated, rollup will go in and add a line like import './MyComponent.css;. It's not the most elegant solution in the world but it works great for my purposes.

vite.config.js:

import { defineConfig } from 'vite';
import { resolve } from 'path';
import vue from '@vitejs/plugin-vue';

import path from 'path';
import fs from 'fs';
import { promisify } from 'util';

const writeFile = promisify(fs.writeFile);
const readFile = promisify(fs.readFile);
const exists = promisify(fs.exists);

// in my actual code, this is pulled out into a helpers/ directory
async function addCSSImport() {
  return {
    name: 'add-css-import',
    async writeBundle(options, bundle) {
      const outputDir = options.dir || '.';

      for (const [fileName] of Object.entries(bundle)) {
        if (fileName.endsWith('.vue.js')) {
          // Extract the base file name without the directory path
          const baseFileName = path.basename(fileName, '.vue.js');
          // Construct the full path to the JS and CSS files
          const jsFilePath = path.join(outputDir, fileName);
          const cssFilePath = jsFilePath.replace('.vue.js', '.css');

          // Check if the CSS file exists
          if (await exists(cssFilePath)) {
            // Read the existing JS file
            let jsFileContent = await readFile(jsFilePath, 'utf8');
            // Generate the import statement for the CSS file
            const cssImport = `import './${baseFileName}.css';\n`;
            // Prepend the import statement to the JS file's content
            jsFileContent = cssImport + jsFileContent;
            // Write the modified JS file content back to the file
            await writeFile(jsFilePath, jsFileContent, 'utf8');
          }
        }
      }
    }
  };
}

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    // prevent monolithic css file from being generated, preferring one for each component
    cssCodeSplit: true,
    lib: {
      entry: {
        ['global-styles']: 'src/styles/app.scss',
        ['buttons.index']: 'src/components/buttons/index.js',
        ['test.index']: 'src/components/test/index.js'
      },
      name: 'my-package-name',
      formats: ['es'] // only export ES module build
    },
    rollupOptions: {
      // externalize deps that shouldn't be bundled into the library
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        },
        // Preserve the modules and directories in the final build
        preserveModules: true
      },
      plugins: [addCSSImport()]
    }
  }
});

and in my package.json, I have:

  "files": [
    "dist"
  ],
  "type": "module",
  "exports": {
    "./styles": "./dist/global-styles.css",
    "./buttons": "./dist/buttons.index.js",
    "./test": "./dist/test.index.js"
  },

Time to let grampa Webpack retire. * [x] vite build working * [x] remove webpack & babel * [x] react to `17.0.2` (matches Bloom Editor & needed for modern storybook) * [x] switch everything to modern es modules * [x] get dynamic loading of activities working * [x] check svg icons in controlBar.tsx. * [x] check that iso639-autonyms.tsv is loading/working * [x] in ActivityContext, make sure the sounds still work * [x] Get simple comprehension quizzes working (already reported ### `yarn dev` experience * [x] vite dev server working (hot reloading, server, etc) * [x] use `s3/` with proxy server in place of `https://bloomlibrary.org` to make CORS work * [x] serve books from `testBooks/` ### Output / Packaging * [x] bloomPlayer.js building with a hash and bloomplayer.htm containing a script tag * [x] check for any significant increase in bundle size <span style="color:darkgreen;">(was 1.1MB, now 800kb)</span> * [x] vite *really* doesn't want to inline css (it interferes with SSR somehow). vitejs/vite#1579. I tried <https://github.com/wxsms/vite-plugin-libcss> to no effect, but it says it's for lib mode only which we don't want. In the end I just linked to the css from the bloomPlayer.htm, problem solved. * [x] move crowdin stuff out of build system and into npm scripts. ### Unit Tests * [x] jest --\> vitest ### Storybook * [x] storybook upgraded and working with vite * [x] migrate the "big set of books" story in `index.tsx`

Mori-Young · 2024-12-08T15:50:07Z

Sorry to bother you, I'm a beginner and I'm trying to build my own component library! But I encountered a similar problem, I'm not sure if it fits this issue, if you know how to solve it or it belongs to this issue, please tell me!

My question:
My component library defines a global css variable index.css to specify some colors. I use lib mode for packaging and formats: ['es']. In addition, the entry file has an import import "./index.css"! But in the packaging result, no style is introduced! I think this is because such a product will report an error when running in the browser! Should I use a plug-in to inject css?

emosheeep · 2024-12-08T16:17:39Z

You should add css files into the sideEffects configurations in package.json, otherwise it will be tree-shaked when bundling.

Mori-Young · 2024-12-09T04:34:55Z

You should add css files into the sideEffects configurations in package.json, otherwise it will be tree-shaked when bundling.

Thank you very much for replying to me!

I searched for related content before trying to add sideEffects: I did not find the sideEffects field in npm doc and vite doc, but I saw some webpack related ones! Can you tell me where I can get the knowledge related to sideEffects?

I set "sideEffects": [ "dist/*", "src/style/*" ],
according to other repositories, but it still didn't work after packaging! Regardless of whether I set sideEffects or not, style.css will exist in the packaging result. I am curious why this is!

My repo is here:https://github.com/Ys-OoO/vue-sketch-ui .You can see the detailed configuration here

Mori-Young · 2024-12-09T05:51:12Z

You should add css files into the sideEffects configurations in package.json, otherwise it will be tree-shaked when bundling.

I seem to have solved the problem. I didn't use sideEffects. The global styles I introduced in the entry file and the styles of each component are packaged into a css file. This way, users can import them when they use them!

But I still want to know about sideEffects! How is it handled in Vite?

pfdgithub · 2024-12-09T07:53:32Z

You should add css files into the sideEffects configurations in package.json, otherwise it will be tree-shaked when bundling.

I seem to have solved the problem. I didn't use sideEffects. The global styles I introduced in the entry file and the styles of each component are packaged into a css file. This way, users can import them when they use them!

But I still want to know about sideEffects! How is it handled in Vite?

https://github.com/vitejs/vite/blob/main/packages/vite/src/node/packages.ts#L177

sarojregmi200 · 2024-12-23T05:27:11Z

for those who are exporting multiple files and only want to add intro to only the index or some entry file. You can also provide function to the intro that returns a string.

output: {
    intro: (chunk) => {
        if (chunk.fileName === 'index.js') {
            return `import "./style.css";`
        }
        return ''
    },
}

https://rollupjs.org/configuration-options/#output-intro-output-outro
See this for more information.

Adding a intro is a clean and easy solution more than adding a plugin, if it works for you.

gwsbhqt changed the title ~~can css styles be appended into the single target js file in library mode?~~ Can css styles be appended into the single target js file in library mode? Jan 18, 2021

gwsbhqt changed the title ~~Can css styles be appended into the single target js file in library mode?~~ Can css be styleInjected in library mode? Jan 19, 2021

yyx990803 added the enhancement New feature or request label Jan 19, 2021

yyx990803 closed this as completed Jan 20, 2021

yyx990803 reopened this Jan 20, 2021

richardtallent mentioned this issue Feb 8, 2021

Testing and assistance with exports needed in version 6 richardtallent/vue-simple-calendar#166

Closed

padarom mentioned this issue Apr 25, 2021

CSS not working awtrix/hd#9

Closed

This comment was marked as spam.

Sign in to view

harmendv added a commit to libvue/core that referenced this issue Sep 19, 2021

Updated getting-started.

5ed1629

vitejs/vite#1579 (comment)

tylerrrkd mentioned this issue Oct 3, 2021

It is hoped that CSS and JS can be packaged together in lib mode #5015

Closed

4 tasks

Shinigami92 added YAO Yet another option... and removed YAO Yet another option... labels Nov 26, 2021

jqueryisamonad mentioned this issue Aug 17, 2023

Can we get rid of external css file? wobsoriano/svelte-sonner#11

Closed

gruhn mentioned this issue Aug 25, 2023

fix(QrcodeStream): styling sometimes missing gruhn/vue-qrcode-reader#362

Merged

jqkk mentioned this issue Sep 17, 2023

디자인 시스템 패키지를 빌드해서 app 패키지에서 사용할 수 있도록 구성 pagers-e3i1/react-world#12

Merged

jcbe-ode mentioned this issue Jan 3, 2024

Feat/wb 2391 edificeio/edifice-frontend-framework#84

Merged

15 tasks

AntJanus mentioned this issue Feb 23, 2024

Add Style injection AntJanus/cottage-ui#2

Closed

ferrucc-io mentioned this issue Apr 14, 2024

Scope styles per component juneHQ/ui#9

Open

braughtg mentioned this issue May 3, 2024

Investigate and resolve component styling issues in entrypoints FarmData2/FarmData2#202

Closed

Largopie mentioned this issue May 6, 2024

[1단계 - 페이먼츠 모듈] 낙타(송재석) 미션 제출합니다. woowacourse/react-modules#26

Merged

This was referenced Jun 5, 2024

NONE) fix: fix component export issue corca-ai/cds#77

Merged

NONE) chore: modify the global.css file to include it in the build output corca-ai/cds#78

Merged

first19326 mentioned this issue Jul 1, 2024

打包报错，怎么解决？ first19326/APlayer#2

Closed

sapphi-red mentioned this issue Aug 16, 2024

vite 库模式下生产环境后，.module.less文件编译后异常无法使用样式 #17890

Closed

7 tasks

eltigerchino mentioned this issue Oct 17, 2024

Allow using build.cssCodeSplit option in vite.config sveltejs/kit#10109

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Can css be styleInjected in library mode? #1579

Can css be styleInjected in library mode? #1579

gwsbhqt commented Jan 18, 2021 •

edited

Loading

yyx990803 commented Jan 20, 2021

gwsbhqt commented Jan 20, 2021

eikooc commented Jan 26, 2021

shanlh commented Feb 3, 2021 •

edited

Loading

richardtallent commented Feb 8, 2021

fuxingloh commented Feb 8, 2021 •

edited

Loading

richardtallent commented Feb 8, 2021

ziping-li commented Feb 27, 2021

hiendv commented May 14, 2021

This comment was marked as spam.

gwsbhqt commented Aug 23, 2021 •

edited

Loading

This comment was marked as spam.

xinyao27 commented Sep 15, 2021

ghost commented Sep 28, 2021

tylerrrkd commented Oct 3, 2021 •

edited

Loading

7zf001 commented Nov 3, 2021 •

edited

Loading

fnick851 commented Nov 26, 2021 •

edited

Loading

Shinigami92 commented Nov 26, 2021

wxsms commented Dec 8, 2021 •

edited

Loading

DamonCais commented Aug 13, 2023

receter commented Aug 14, 2023 •

edited

Loading

nicefan commented Sep 7, 2023

emosheeep commented Sep 7, 2023

receter commented Oct 10, 2023

TerkaPrzemyslaw1897 commented Nov 23, 2023

kalnode commented Jan 19, 2024 •

edited

Loading

eguzman-tc commented Apr 10, 2024 •

edited

Loading

Mori-Young commented Dec 8, 2024

emosheeep commented Dec 8, 2024

Mori-Young commented Dec 9, 2024

Mori-Young commented Dec 9, 2024

pfdgithub commented Dec 9, 2024

sarojregmi200 commented Dec 23, 2024

Can css be styleInjected in library mode? #1579

Can css be styleInjected in library mode? #1579

Comments

gwsbhqt commented Jan 18, 2021 • edited Loading

yyx990803 commented Jan 20, 2021

gwsbhqt commented Jan 20, 2021

eikooc commented Jan 26, 2021

shanlh commented Feb 3, 2021 • edited Loading

richardtallent commented Feb 8, 2021

fuxingloh commented Feb 8, 2021 • edited Loading

richardtallent commented Feb 8, 2021

ziping-li commented Feb 27, 2021

hiendv commented May 14, 2021

This comment was marked as spam.

gwsbhqt commented Aug 23, 2021 • edited Loading

This comment was marked as spam.

xinyao27 commented Sep 15, 2021

ghost commented Sep 28, 2021

tylerrrkd commented Oct 3, 2021 • edited Loading

7zf001 commented Nov 3, 2021 • edited Loading

fnick851 commented Nov 26, 2021 • edited Loading

Shinigami92 commented Nov 26, 2021

wxsms commented Dec 8, 2021 • edited Loading

DamonCais commented Aug 13, 2023

receter commented Aug 14, 2023 • edited Loading

nicefan commented Sep 7, 2023

emosheeep commented Sep 7, 2023

receter commented Oct 10, 2023

TerkaPrzemyslaw1897 commented Nov 23, 2023

kalnode commented Jan 19, 2024 • edited Loading

eguzman-tc commented Apr 10, 2024 • edited Loading

Mori-Young commented Dec 8, 2024

emosheeep commented Dec 8, 2024

Mori-Young commented Dec 9, 2024

Mori-Young commented Dec 9, 2024

pfdgithub commented Dec 9, 2024

sarojregmi200 commented Dec 23, 2024

gwsbhqt commented Jan 18, 2021 •

edited

Loading

shanlh commented Feb 3, 2021 •

edited

Loading

fuxingloh commented Feb 8, 2021 •

edited

Loading

gwsbhqt commented Aug 23, 2021 •

edited

Loading

tylerrrkd commented Oct 3, 2021 •

edited

Loading

7zf001 commented Nov 3, 2021 •

edited

Loading

fnick851 commented Nov 26, 2021 •

edited

Loading

wxsms commented Dec 8, 2021 •

edited

Loading

receter commented Aug 14, 2023 •

edited

Loading

kalnode commented Jan 19, 2024 •

edited

Loading

eguzman-tc commented Apr 10, 2024 •

edited

Loading