使用props变量的方法函数中的vue nuxt加载css文件

Question

我想在触发组件事件后加载.css文件。在vue / nuxt中可能吗？

场景1.组件已加载，道具已传入2.初始化事件的调用方法3.方法使用属性值加载css

export default {
  methods: {
     myLoadCss(){
        (load css from static folder) 
           '/mycss/+this.$props.myCssFolder+/custom.css'
       }
   }
}

Answer 1

正确的位置位于nuxt.config.js中，在此文件中，您有一个名为head的属性，在此head中，您将配置导入。另一件事是，您无需为此使用html标签，而将使用json模式。

看https://nuxtjs.org/guide/configuration以获得更详细的说明。

现在您很怀疑，如果您需要将CSS全局导入，则可以在nuxt.config.js内声明一个名为css的新属性，如下所示：

...  
css: [
  '~/assets/style/app.styl',
  '~/assets/style/main.css'
],
...

另一种方法是直接将CSS导入组件中，为此，您可以执行以下操作：

    <style scoped>
    @import '~/assets/style/main.css';
    </style>
OR
    <style scoped src="@/assets/styles/mystyles.css">
    </style>

[在Nuxt中，您也需要在应用程序中安装CSS加载器，因此请确保在应用程序中安装了“ stylus”和“ stylus-loader”。