add sass-resources-loader

Author: liaofeiyin

package.json

@@ -26,6 +26,7 @@
  "eslint-plugin-vue": "^5.0.0",
  "node-sass": "^4.9.0",
  "sass-loader": "^7.1.0",
+ "sass-resources-loader": "^2.0.0",
  "typescript": "~3.2.2",
  "vue-template-compiler": "^2.5.21"
  }

src/app/scss/_colors.scss

@@ -1,6 +1,5 @@
 // 前景色使用 a-颜色名（如果与其他组件同名，则使用 a-fg-颜色名）
 // 背景色使用 a-bg-颜色名
-@import "vars";
 
 .a-bg-primary {
  background-color: $color-primary;

src/app/scss/_text.scss

@@ -1,4 +1,3 @@
-@import "vars";
 
 html {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "PingFangSC",

src/app/scss/_vars.scss

@@ -1,4 +1,6 @@
-$_: 1rem/20;
+//$_: 1rem/20;
+$_: 1px;
+$px: $_;
 
 $weight-map: (
  ultralight: 100,

src/views/home/home.vue

@@ -5,7 +5,7 @@
  <div @click="tapPrint">打印</div>
 
  <div ref="page1" class="fx-row" style="page-break-after: always">
- <div class="border">第一页打印内容</div>
+ <div class="border a-text-20">第一页打印内容</div>
  <div>第一页打印内容</div>
  <div>第一页打印内容</div>
  <div>第一页打印内容</div>
@@ -137,6 +137,6 @@ export default Vue.extend({
 
 <style lang="scss">
 .border {
- border: 1px solid #ccc;
+ border: 1*$px solid #ccc;
 }
 </style>

vue.config.js

@@ -7,6 +7,19 @@ module.exports = {
  },
  },
 
+ chainWebpack: config => {
+ const oneOfsMap = config.module.rule('scss').oneOfs.store
+ oneOfsMap.forEach(item => {
+ item
+ .use('sass-resources-loader')
+ .loader('sass-resources-loader')
+ .options({
+ resources: './src/app/scss/_vars.scss'
+ })
+ .end()
+ })
+ },
+
  // pages: {
  // about: {
  // entry: 'src/views/about-main.js',

yarn.lock

@@ -1293,6 +1293,12 @@ async@^1.5.2:
  version "1.5.2"
  resolved "http://registry.npm.taobao.org/async/download/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
 
+async@^2.1.4:
+ version "2.6.2"
+ resolved "https://registry.yarnpkg.com/async/-/async-2.6.2.tgz#18330ea7e6e313887f5d2f2a904bac6fe4dd5381"
+ dependencies:
+ lodash "^4.17.11"
+
 asynckit@^0.4.0:
  version "0.4.0"
  resolved "http://registry.npm.taobao.org/asynckit/download/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
@@ -4319,7 +4325,7 @@ loader-utils@^0.2.16:
  json5 "^0.5.0"
  object-assign "^4.0.1"
 
-loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0:
+loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.0.4, loader-utils@^1.1.0:
  version "1.2.3"
  resolved "http://registry.npm.taobao.org/loader-utils/download/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
  dependencies:
@@ -6149,6 +6155,15 @@ sass-loader@^7.1.0:
  pify "^3.0.0"
  semver "^5.5.0"
 
+sass-resources-loader@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/sass-resources-loader/-/sass-resources-loader-2.0.0.tgz#88569c542fbf1f18f33a6578b77cc5b36c56911d"
+ dependencies:
+ async "^2.1.4"
+ chalk "^1.1.3"
+ glob "^7.1.1"
+ loader-utils "^1.0.4"
+
 sax@^1.2.4, sax@~1.2.4:
  version "1.2.4"
  resolved "http://registry.npm.taobao.org/sax/download/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"