Less (Leaner Style Sheets 的缩写) 是一门向后兼容的 CSS 扩展语言。
问题
- 要在APP.vue中引入外部css文件时,不能直接inport,要使用
@import '路径'
- 添加样式时一致不显示,不解析less,要加style样式中添加
<style lang="less">
后,样式解析成功
知识点
- 当前组件引入外部css样式,使用
@import url("./assets/app.less");
(路径根据实际情况添加,less文件添加在了assets目录下) - 在style上添加Lang属性解析Less文件,添加scope声明局部变量
- vue 项目中
assets
文件夹与static
文件夹引用的区别
assets目录中的文件会被webpack处理解析为模块依赖,只支持相对路径形式。build的时候由Webpack解析为模块依赖。
static 目录下的文件并不会被Webpack处理:它们会直接被复制到最终的打包目录(默认是
dist/static
)下。必须使用绝对路径引用这些文件,这是通过在config.js
文件中的build.assetsPublicPath
和build.assetsSubDirectory
连接来确定的。
也可以在app.vue内部直接定义设置样式
.menu{
li{
color: #00ff00;
}
}