[Nuxt] Add CSS Libraries to Nuxt
CSS to add libraries Nuxt
2023-09-14 09:00:51 时间
You can easily add CSS libraries to Nuxt using yarn
or npm
to install them, then simply adding them to the nuxt.config.js
so they're included in each page. Then all the classes will be available for use in all of your templates. This lesson walks your through installing a library then adding it to your nuxt.config.js
.
Install:
npm i --save tachyons
nuxt.config.js:
module.exports = { /* ** Headers of the page */ head: { title: 'starter', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: 'Nuxt.js project' } ], link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } ] }, /** * Global CSS */ css: ['tachyons/css/tachyons.css'], /* ** Customize the progress-bar color */ loading: { color: '#3B8070' }, /* ** Build configuration */ build: { /* ** Run ESLINT on save */ extend (config, ctx) { if (ctx.isClient) { config.module.rules.push({ enforce: 'pre', test: /\.(js|vue)$/, loader: 'eslint-loader', exclude: /(node_modules)/ }) } } } }
相关文章
- css怎么改鼠标样式,如何利用CSS改变鼠标的样式
- HTML+CSS 学成在线首页案例实操详解(超良心版!)
- css绝对定位的参照物是什么_css 清除上定位
- 【说站】css中clear属性是什么
- 【说站】css水平居中元素的宽度探究
- 【说站】css overflow属性有什么用
- 【说站】css权重的计算规则
- 仅使用CSS就可以提高页面渲染速度的4个技巧
- 【CSS教程】紫色渐变登陆布局html+css代码
- 纯CSS + 媒体查询实现网页导航特效详解编程语言
- 属性Oracle的CSS属性:让你的网站更出彩(oracle的css)
- 利用Oracle TO函数实现数据转换(oracle to_函数)
- 一些很不错的css技巧,但也常为人们所忽略
- DIV和CSS排版中制作细线条的方法小结
- CSSvista可同时在IE和Fifrefox调试的CSS编辑提供下载
- jQuerytoggle()设置CSS样式
- JS+CSS实现的一种交互体验表单页面
- juqery学习之六CSS--css、位置、宽高
- jQuery设置CSS属性示例介绍