Commit cc2faed28fcd6a4a86472e108491594e1fabcf9a

Authored by liuqimichale
1 parent ce0c9be8

minxin.scss 应入

webintroduce/build/utils.js
... ... @@ -60,7 +60,15 @@ exports.cssLoaders = function (options) {
60 60 postcss: generateLoaders(),
61 61 less: generateLoaders('less'),
62 62 sass: generateLoaders('sass', { indentedSyntax: true }),
63   - scss: generateLoaders('sass'),
  63 + scss: generateLoaders('sass').concat({
  64 + loader: 'sass-resources-loader',
  65 + options: {
  66 + resources: [
  67 + path.resolve(__dirname,'../src/assets/css/mixin.scss'),
  68 + //path.resolve(__dirname,'../src/assets/css/variables.scss')
  69 + ]
  70 + }
  71 + }),
64 72 stylus: generateLoaders('stylus'),
65 73 styl: generateLoaders('stylus')
66 74 }
... ...
webintroduce/package.json
... ... @@ -40,6 +40,7 @@
40 40 "postcss-url": "^7.2.1",
41 41 "rimraf": "^2.6.0",
42 42 "sass-loader": "^7.1.0",
  43 + "sass-resources-loader": "^2.0.0",
43 44 "semver": "^5.3.0",
44 45 "shelljs": "^0.7.6",
45 46 "uglifyjs-webpack-plugin": "^1.1.1",
... ...
webintroduce/src/assets/css/mixin.scss 0 → 100644
  1 +@import "./variables";
  2 +//清楚浮动
  3 +@mixin clearfix() {
  4 + &:before,
  5 + &:after {
  6 + content: "";
  7 + display: table;
  8 + }
  9 + &:after {
  10 + clear: both;
  11 + }
  12 +}
  13 +
  14 +//圆角边框
  15 +@mixin border-radius($radius) {
  16 + -webkit-border-radius: $radius;
  17 + -moz-border-radius: $radius;
  18 + -ms-border-radius: $radius;
  19 + border-radius: $radius;
  20 +}
  21 +
  22 +// 透明度
  23 +@mixin opacity($opacity) {
  24 + -webkit-border-radius: $radius;
  25 + -moz-border-radius: $radius;
  26 + -ms-border-radius: $radius;
  27 + border-radius: $radius;
  28 +}
  29 +
  30 +//文字溢出省略显示
  31 +@mixin text-ellipsis() {
  32 + white-space: nowrap;
  33 + overflow: hidden;
  34 + text-overflow: ellipsis;
  35 +}
  36 +
  37 +//盒模型阴影
  38 +@mixin shadow($x, $y, $blur, $color) {
  39 + -webkit-box-shadow: $x $y $blur $color;
  40 + -moz-box-shadow: $x $y $blur $color;
  41 + box-shadow: $x $y $blur $color;
  42 +}
  43 +
  44 +
  45 +
  46 +
  47 +
... ...
webintroduce/src/assets/css/variables.scss 0 → 100644
  1 +$baseColor:#000;
  2 +
  3 +$baseBgColor:#000;
... ...
webintroduce/src/views/VHome.vue
... ... @@ -30,4 +30,9 @@ export default {
30 30  
31 31 <style scoped lang="scss">
32 32  
  33 + ul li{
  34 + @include border-radius(100%);
  35 + background-color: #00ffff;
  36 + color: $baseColor;
  37 + }
33 38 </style>
... ...