1.引入外部css
vue脚手架搭建的项目".vue"文件下方会有style标签,供我们书写css,但我们为了实现结构样式相分离就需要在外部书写css,这样代码看起来更清晰。
首先我们在assets文件夹下建立css文件夹用来保存我们的css文件,在css文件中直接书写css代码,在".vue"文件中的script标签里使用import引入assets里的样式
import '../assets/css/detail/detail.css';
这里说一下assets文件夹与static文件夹的区别,assets文件在src里面,常用来放置样式、静态图片,打包时会进行打包编译,assets中的文件在vue中的template/style下引用时,用../这种相对路径的形式,在script下必须用@import的方式引入。static文件不需要打包就直接放在最终的文件里了,常用来放没有npm包的第三方插件,字体文件等,static下的文件在.vue中的任何地方都只要使用../这种相对路径的方式引入;
2.sass与scss的区别
首先是文件扩展名不同,sass 是以“.sass”后缀为扩展名,而 scss 是以“.scss”后缀为扩展名,sass 和 scss 都是更改html样式的文件,都称之为 sass,最终都是要编译成css,不同之处主要在于语法形式上,sass是靠缩进表示嵌套关系,scss是花括号,可以理解为scss是sass的一个升级版本,兼容了sass;
//sass 个人不习惯,比较难看
header
width:100px;
span
color:red;
//scss 顺眼,像是css简单明了
header{
width:100px;
span{
color:red;
}
}
其次scss能做运算、写函数,写全局变量,但是我只是作为语法糖用而已,常用的功能有:
语法嵌套,使用变量 $color : #025214;继承 @extend,混入 @mixin
3.在components文件夹内的".vue"文件内部使用sass
安装依赖
npm install sass-loader --save-dev
npm install node-sass --save-dev
安装完成之后查看pakeage.json文件devDependencies下是否能搜到安装依赖的版本
在build文件夹下的webpack.base.conf.js的rules里面添加配置
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}
在.vue文件style标签中添加lang="scss"
<style scoped lang="scss">
.index{
color: red;
span{
color: forestgreen;
}
}
</style>
npm run dev运行查看样式
4.在components文件夹内的".vue"文件内引入外部sass文件
像上面那样在style标签里添加lang="scss"属性,而后直接写在style标签里面的样式无疑不符合结构样式相分离的宗旨,而且这样写会感觉很乱,所以我们首先还是在assets文件夹下建立sass文件夹用来保存我们的scss文件,在scss文件中直接书写scss代码,在".vue"文件中的script标签里使用import引入assets里的样式
//scss代码
$fontSize:30px;//变量
.index{
color: yellowgreen;
font-size: 20px;
span{
color: forestgreen;
font-size: $fontSize;
}
}
//引入scss文件
<style scoped lang="scss">
@import "../assets/sass/index.scss"
</style>
注意引入时不要加url()
@import url("../assets/sass/index.scss")
这样写虽然不会报错,但不会生效;
5.在"App.vue"或"main.js"文件内引入外部sass文件
虽然上面的方法也能引入外部的scss文件,但每个页面都要引一次,感觉还是不爽;我们还可以在app.vue或main.js内全局引入样式,就像使用element-ui和mint-ui一样爽,只需要在入口文件内引一次,全局都可以用;
重复上面的步骤,在assets文件夹下的sass文件夹建立一个的scss文件,用来存放所有的scss文件
home.scss文件内引入其他组件需要用到的样式,
//引入index组件样式
@import "./index.scss";
//引入my组件样式
@import "./my.scss";
在app.vue或main.js内引入home.scss文件就可以使用了
//在main.js内引入
import "./assets/sass/home.scss"
样式效果
:
//在app.vue内引入
<style lang="scss" >
@import "./assets/sass/home.scss"
</style>
样式效果
后面两条其实就是两种引入方式的问题,第4条为按需引入,第5条为全局引入,使用时看个人喜好吧