【问题标题】:load styles in vue component package (npm)在 vue 组件包 (npm) 中加载样式
【发布时间】:2021-01-24 12:10:19
【问题描述】:

我制作了 vue 组件包并发布到 npm 中。 可以,但是组件的样式没有加载!

我用那个命令做了包:

vue-cli-service build --target lib --name test-package ./src/index.js

及其我的 package.json 的一部分:

"style": "./dist/test-package.css",
"main": "./dist/test-package.common.js",

及其组件样式:

<style scoped>
  .my-bg {
     backgorund: red;
  }
</style>

【问题讨论】:

    标签: vue.js npm


    【解决方案1】:

    由于您没有提供重现的方法,因此无法知道您的配置中究竟是什么导致了这种行为。 (默认情况下应该包含 CSS,所以你有一些设置会干扰)。

    This discussion 包含一些可能的修复:

    • 如果您的package.json 包含:sideeffects: false,请将其删除或更改为:sideEffects: ['*.css']
    • css: { extract: false } 添加到您的vue.config.jsmodule.exports

    可能相关webpack/issues/6741


    注意:如果您还没有vue.config.js,请在根目录下创建它,并包含以下内容:

    module.exports = {
      css: { extract: false }
    }
    

    【讨论】:

    • 感谢回答,但我没有使用 webpack.config 文件
    • @Ahmad,您可能没有使用它,但 Vue 是,除非您将其更改为使用不同的模块捆绑器。 vue.config.js 是一个文件,您可以将其放在项目的根目录中并与 webpack.config.js 交互,该文件位于 @vue/cli-service/webpack.config.js 中。您使用的是不同的捆绑器吗?如果有,是哪一个?
    • 谢谢,我创建了 vue.config.js 文件并将 css: { extract: false } 放入其中,效果很好!
    猜你喜欢
    • 2021-04-14
    • 2017-08-03
    • 2021-09-19
    • 1970-01-01
    • 2019-08-28
    • 2020-04-07
    • 2023-03-18
    • 2017-07-14
    • 2018-02-23
    相关资源
    最近更新 更多