Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: add warnings on CSS sideEffects #4836

Merged
merged 1 commit into from Nov 21, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 5 additions & 1 deletion docs/guide/build-targets.md
Expand Up @@ -50,6 +50,10 @@ A lib build outputs:

- `dist/myLib.css`: Extracted CSS file (can be forced into inlined by setting `css: { extract: false }` in `vue.config.js`)

::: warning
If you are developing a library or in a monorepo, please be aware that CSS imports **are side effects**. Make sure to **remove** `"sideEffects": false` in the `package.json`, otherwise CSS chunks will be dropped by webpack in production builds.
:::

### Vue vs. JS/TS Entry Files

When using a `.vue` file as entry, your library will directly expose the Vue component itself, because the component is always the default export.
Expand Down Expand Up @@ -148,7 +152,7 @@ Now on the page, the user only needs to include Vue and the entry file:

When building a [Webcomponent](#web-component) or [Library](#library), the entry point is not `main.js`, but an `entry-wc.js` file, generated here: [https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/commands/build/resolveWcEntry.js](https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/commands/build/resolveWcEntry.js)

So to use vuex in web component target, you need to initialize the store in `App.vue`:
So to use vuex in web component target, you need to initialize the store in `App.vue`:

``` js
import store from './store'
Expand Down
4 changes: 4 additions & 0 deletions docs/zh/guide/build-targets.md
Expand Up @@ -54,6 +54,10 @@ dist/myLib.css 0.33 kb 0.23 kb

- `dist/myLib.css`:提取出来的 CSS 文件 (可以通过在 `vue.config.js` 中设置 `css: { extract: false }` 强制内联)

::: warning 警告
如果你在开发一个库或多项目仓库 (monorepo),请注意导入 CSS **是具有副作用的**。请确保在 `package.json` 中**移除** `"sideEffects": false`,否则 CSS 代码块会在生产环境构建时被 webpack 丢掉。
:::

### Vue vs. JS/TS 入口文件

当使用一个 `.vue` 文件作为入口时,你的库会直接暴露这个 Vue 组件本身,因为组件始终是默认导出的内容。
Expand Down