说明
自用
一、项目中使用scss
- 1.安装
npm install sass-loader sass-resources-loader style-loader css-loader --save-dev
- 2.修改
sass-loader版本
在package.json中修改
将"sass-loader": "^8.0.0",修改为"sass-loader": "^7.3.1",
- 3.使用
在*.vue中使用
<style lang="scss" scoped>
</style>
二、全局引用公共scss
- 1.定义全局变量文件
src/styles/_variables.scss
/* Variables */
// Base color
$blue:#409EFF;
$light-blue:#3A71A8;
$red:#C03639;
$pink: #F56C6C;
$green: #30B08F;
$tiffany: #4AB7BD;
$yellow:#E6A23C;
$panGreen: #30B08F;
$menuBg:#304156;
$menuText:#bfcbd9;
$menuActiveText:#409EFF; // Also see settings.sidebarTextTheme
:export {
menuBg: $menuBg;
menuText: $menuText;
menuActiveText: $menuActiveText;
}
- 2.定义全局的
Mixins文件src/styles/_mixins.scss
/* Mixins */
/*Clearfix*/
@mixin clearfix() {
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
}
/*圆角边框*/
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
/*跨浏览器的透明度设置*/
@mixin opacity($opacity) {
opacity: $opacity;
$opacity-ie: $opacity * 100;
filter: alpha(opacity=$opacity-ie); //IE8
}
/*文本溢出省略显示*/
@mixin text-ellipsis() {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/*多行文本溢出省略显示*/
@mixin text-ellipsis() {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
- 3.在
src/styles/index.scss引入全局scss
@import './variables.scss';
@import './mixins.scss';
@import './transition.scss';
@import './svgicon.scss';
/* Global scss */
body {
height: 100%;
margin: 0px;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}
html {
height: 100%;
}
- 全局引入样式
在build/utils.js中
将
- 全局引入样式
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
修改为：
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
// scss: generateLoaders('sass'),
scss: generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/styles/index.scss')
}
}
),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
三、使用Font Awesome图标扩展
- 1.安装
npm install font-awesome --save
- 2.使用
在src/main.js中引入
// 图标网站：http://fontawesome.dashgame.com/
import 'font-awesome/scss/font-awesome.scss'
四、设置图片背景
.el-main {
height: calc(100% - 100px);
padding: 0px;
background-image: linear-gradient(to top right, rgba(0, 0, 255, 0.1), rgba(255, 104, 89, 0.1)), //渐变
linear-gradient(rgba(27, 119, 255, 0.1) 100%, transparent),
url("~@/styles/img/timg.jpg"); //图片背景，使用'~@'
background-size: 100% auto; //自适应
}
五、鼠标形状
/*鼠标 手形状态*/
cursor:pointer;
-
default默认光标（通常是一个箭头） -
auto默认。浏览器设置的光标。 -
crosshair光标呈现为十字线。 -
pointer光标呈现为指示链接的指针（一只手） -
move此光标指示某对象可被移动 -
text此光标指示文本 -
help此光标指示可用的帮助（通常是一个问号或一个气球）
六、打包后修改element UI样式被覆盖
解决：修改src/main.js
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
import store from './store'
七、字体渐变动效
@mixin text-excessive() {
/*初始颜色*/
color: #f35626;
/*渐变颜色*/
background-image: linear-gradient(92deg, #f35626 0%,#feab3a 100%);
/*填充文字*/
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
/*时间*/
animation: hue 2s infinite linear;
}
@keyframes hue {
from {
filter: hue-rotate(0deg);
}
to {
filter: hue-rotate(-360deg);
}
}
参考：
