說明

自用

一、項目中使用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 教程

二、全局引用公共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;
}

/*跨瀏覽器的透明度設(shè)置*/
@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圖標(biāo)擴展

Font Awesome中文網(wǎng)

• 1.安裝

npm install font-awesome --save

• 2.使用
  在src/main.js中引入

// 圖標(biāo)網(wǎng)站：http://fontawesome.dashgame.com/
import 'font-awesome/scss/font-awesome.scss'

四、設(shè)置圖片背景

.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; //自適應(yīng)
  }

五、鼠標(biāo)形狀

/*鼠標(biāo) 手形狀態(tài)*/
    cursor:pointer;

• default 默認(rèn)光標(biāo)（通常是一個箭頭）
• auto 默認(rèn)。瀏覽器設(shè)置的光標(biāo)。
• crosshair 光標(biāo)呈現(xiàn)為十字線。
• pointer 光標(biāo)呈現(xiàn)為指示鏈接的指針（一只手）
• move 此光標(biāo)指示某對象可被移動
• text 此光標(biāo)指示文本
• help 此光標(biāo)指示可用的幫助（通常是一個問號或一個氣球）

六、打包后修改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的樣式無效了。這是什么原因？