From 54dab3c652315f713b26e1204c1ea6476acbe88f Mon Sep 17 00:00:00 2001 From: liuqimichale <123456lq> Date: Tue, 2 Apr 2019 21:04:35 +0800 Subject: [PATCH] 导入公用css --- build/utils.js | 11 ++++++++++- build/webpack.base.conf.js | 10 ++++++++++ package.json | 10 +++++++++- src/App.vue | 18 +++++++++++++----- src/assets/style/mixin.scss | 104 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/assets/style/reset.css | 303 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/components/HelloWorld.vue | 113 ----------------------------------------------------------------------------------------------------------------- src/components/geomagnetism.vue | 23 +++++++++++++++++++++++ src/components/screen.vue | 13 +++++++++++++ src/main.js | 1 + 10 files changed, 486 insertions(+), 120 deletions(-) create mode 100644 src/assets/style/mixin.scss create mode 100644 src/assets/style/reset.css delete mode 100644 src/components/HelloWorld.vue create mode 100644 src/components/geomagnetism.vue create mode 100644 src/components/screen.vue diff --git a/build/utils.js b/build/utils.js index e534fb0..76fbeff 100644 --- a/build/utils.js +++ b/build/utils.js @@ -60,7 +60,16 @@ exports.cssLoaders = function (options) { 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/assets/style/mixin.scss'), + //path.resolve(__dirname,'../src/assets/css/variables.scss') + ] + } + }), + stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') } diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js index a07e683..ff4791c 100644 --- a/build/webpack.base.conf.js +++ b/build/webpack.base.conf.js @@ -64,6 +64,16 @@ module.exports = { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } + }, + { + test: /\.scss$/, + use: [{ + loader: "style-loader" // creates style nodes from JS strings + }, { + loader: "css-loader" // translates CSS into CommonJS + }, { + loader: "sass-loader" // compiles Sass to CSS + }] } ] }, diff --git a/package.json b/package.json index 4e647f3..6af0c0e 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,9 @@ "build": "node build/build.js" }, "dependencies": { + "node-sass": "^4.11.0", + "sass-loader": "^7.1.0", + "sass-resources-loader": "^2.0.0", "vue": "^2.5.2" }, "devDependencies": { @@ -24,12 +27,13 @@ "babel-preset-stage-2": "^6.22.0", "chalk": "^2.0.1", "copy-webpack-plugin": "^4.0.1", - "css-loader": "^0.28.0", + "css-loader": "^0.28.11", "extract-text-webpack-plugin": "^3.0.0", "file-loader": "^1.1.4", "friendly-errors-webpack-plugin": "^1.6.1", "html-webpack-plugin": "^2.30.1", "node-notifier": "^5.1.2", + "node-sass": "^4.11.0", "optimize-css-assets-webpack-plugin": "^3.2.0", "ora": "^1.2.0", "portfinder": "^1.0.13", @@ -37,8 +41,12 @@ "postcss-loader": "^2.0.8", "postcss-url": "^7.2.1", "rimraf": "^2.6.0", + "sass-loader": "^7.1.0", "semver": "^5.3.0", "shelljs": "^0.7.6", + "style-loader": "^0.23.1", + "stylus": "^0.54.5", + "stylus-loader": "^3.0.2", "uglifyjs-webpack-plugin": "^1.1.1", "url-loader": "^0.5.8", "vue-loader": "^13.3.0", diff --git a/src/App.vue b/src/App.vue index 6f86de0..23c3831 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,17 +1,26 @@ @@ -23,6 +32,5 @@ export default { -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; - margin-top: 60px; } diff --git a/src/assets/style/mixin.scss b/src/assets/style/mixin.scss new file mode 100644 index 0000000..163e371 --- /dev/null +++ b/src/assets/style/mixin.scss @@ -0,0 +1,104 @@ + +//清楚浮动 +@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) { + -webkit-border-radius: $radius; + -moz-border-radius: $radius; + -ms-border-radius: $radius; + border-radius: $radius; +} + +//文字溢出省略显示 +@mixin text-ellipsis() { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +//盒模型阴影 +@mixin shadow($x, $y, $blur, $color) { + -webkit-box-shadow: $x $y $blur $color; + -moz-box-shadow: $x $y $blur $color; + box-shadow: $x $y $blur $color; +} + +/*单条border样式*/ +@mixin border-1px ($color, $direction) { + content: ''; + position: absolute; + background: $color; + @if $direction == left { + left: 0; + top: 0; + height: 100%; + width: 2px; + transform: scaleX(0.5); + transform-origin: left 0; + } + @if $direction == right { + right: 0; + top: 0; + height: 100%; + width: 2px; + transform: scaleX(0.5); + transform-origin: right 0; + } + @if $direction == bottom { + bottom: 0; + left: 0; + width: 100%; + height: 2px; + transform: scaleY(0.5); + transform-origin: 0 bottom; + } + @if $direction == top { + top: 0; + left: 0; + width: 100%; + height: 2px; + transform: scaleY(0.5); + transform-origin: 0 top; + } +} + +/*四条border样式*/ +@mixin all-border-1px ($color, $radius) { + content: ''; + position: absolute; + top: 0; + left: 0; + border: 2px solid $color; + border-radius: $radius * 2; + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 200%; + height: 200%; + -webkit-transform: scale(0.5); + transform: scale(0.5); + -webkit-transform-origin: left top; + transform-origin: left top; +} + + + + + diff --git a/src/assets/style/reset.css b/src/assets/style/reset.css new file mode 100644 index 0000000..687d05f --- /dev/null +++ b/src/assets/style/reset.css @@ -0,0 +1,303 @@ +html { + font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + font-size: 62.5%; +} + +body { + margin: 0; + font-size: 1.4rem; + line-height: 1.5; + color: #333333; + background-color: white; + height: 100%; + overflow-x: hidden; + -webkit-overflow-scrolling: touch; +} + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} + +audio, +canvas, +progress, +video { + display: inline-block; + vertical-align: baseline; +} + +audio:not([controls]) { + display: none; + height: 0; +} + +[hidden], +template { + display: none; +} + +svg:not(:root) { + overflow: hidden; +} + +a { + background: transparent; + text-decoration: none; + -webkit-tap-highlight-color: transparent; + color: #0088cc; +} + +a:active { + outline: 0; +} + +a:active { + color: #006699; +} + +abbr[title] { + border-bottom: 1px dotted; +} + +b, +strong { + font-weight: bold; +} + +dfn { + font-style: italic; +} + +mark { + background: #ff0; + color: #000; +} + +small { + font-size: 80%; +} + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +img { + border: 0; + vertical-align: middle; +} + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +pre { + overflow: auto; + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +button, +input, +optgroup, +select, +textarea { + color: inherit; + font: inherit; + margin: 0; +} + +button { + overflow: visible; +} + +button, +select { + text-transform: none; +} + +button, +html input[type="button"], +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; + cursor: pointer; +} + +button[disabled], +html input[disabled] { + cursor: default; +} + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +input { + line-height: normal; +} + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; + padding: 0; +} + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +input[type="search"] { + -webkit-appearance: textfield; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +legend { + border: 0; + padding: 0; +} + +textarea { + overflow: auto; + resize: vertical; +} + +optgroup { + font-weight: bold; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +} + +html, +button, +input, +select, +textarea { + font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif; +} + +h1, +h2, +h3, +h4, +h5, +h6, +p, +figure, +form, +blockquote { + margin: 0; +} + +ul, +ol, +li, +dl, +dd { + margin: 0; + padding: 0; +} + +ul, +ol { + list-style: none outside none; +} + +h1, +h2, +h3 { + line-height: 2; + font-weight: normal; +} + +h1 { + font-size: 1.8rem; +} + +h2 { + font-size: 1.6rem; +} + +h3 { + font-size: 1.4rem; +} + +input::-moz-placeholder, +textarea::-moz-placeholder { + color: #cccccc; +} + +input:-ms-input-placeholder, +textarea:-ms-input-placeholder { + color: #cccccc; +} + +input::-webkit-input-placeholder, +textarea::-webkit-input-placeholder { + color: #cccccc; +} + +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue deleted file mode 100644 index 1c19f2a..0000000 --- a/src/components/HelloWorld.vue +++ /dev/null @@ -1,113 +0,0 @@ - - - - - - diff --git a/src/components/geomagnetism.vue b/src/components/geomagnetism.vue new file mode 100644 index 0000000..3e53192 --- /dev/null +++ b/src/components/geomagnetism.vue @@ -0,0 +1,23 @@ + + + + + + diff --git a/src/components/screen.vue b/src/components/screen.vue new file mode 100644 index 0000000..da3a2a7 --- /dev/null +++ b/src/components/screen.vue @@ -0,0 +1,13 @@ + + + + + diff --git a/src/main.js b/src/main.js index 684ffac..43debc5 100644 --- a/src/main.js +++ b/src/main.js @@ -2,6 +2,7 @@ // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' +require ('./assets/style/reset.css') Vue.config.productionTip = false -- libgit2 0.21.4