vue-element（二）样式相关

说明

自用

一、项目中使用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中使用

SCSS 教程

二、全局引用公共scss

vue-cli 2.x中全局引用公共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%;
}

• 4. 全局引入样式
     在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图标扩展

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);
  }
}

参考：

(javascript)vue项目打包后，写的覆盖element的样式无效了。这是什么原因？