🎨 使用 sass-resources-loader 全局加载sass 配置

Author: savoygu

build/utils.js

@@ -65,7 +65,18 @@ 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, '../node_modules/sass-bem/_bem.scss'),
+            path.resolve(__dirname, '../node_modules/compass-mixins/lib/_compass.scss'),
+            path.resolve(__dirname, '../src/theme/var.scss')
+          ]
+        }
+      }
+    ),
     stylus: generateLoaders('stylus'),
     styl: generateLoaders('stylus')
   }

package-lock.json

@@ -31,6 +31,7 @@
     "babel-register": "^6.22.0",
     "chalk": "^2.0.1",
     "co-request": "^1.0.0",
+    "compass-mixins": "^0.12.10",
     "connect-history-api-fallback": "^1.3.0",
     "copy-webpack-plugin": "^4.0.1",
     "cross-env": "^5.1.4",
@@ -68,6 +69,7 @@
     "rimraf": "^2.6.0",
     "sass-bem": "^2.6.5",
     "sass-loader": "^7.0.1",
+    "sass-resources-loader": "^1.3.3",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
     "url-loader": "^0.5.8",

package.json

@@ -67,9 +67,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import "node_modules/sass-bem/bem";
-$bem-component-namespace: 'md';
-
 @include c('board') {
 
   @include e('swiper') {

src/pages/board/index.vue

@@ -64,9 +64,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import "node_modules/sass-bem/bem";
-$bem-component-namespace: 'md';
-
 @include c('item') {
 
   @include e('background') {

src/pages/item/index.vue

@@ -42,9 +42,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import "node_modules/sass-bem/bem";
-$bem-component-namespace: 'md';
-
 @include c('profile') {
 
   @include e('header') {

src/pages/profile/index.vue

@@ -60,9 +60,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import "node_modules/sass-bem/bem";
-$bem-component-namespace: 'md';
-
 @include c('search') {
 
   @include e('header') {

src/pages/search/index.vue

@@ -67,9 +67,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import "node_modules/sass-bem/bem";
-$bem-component-namespace: 'md';
-
 page {
   height: 100%;
 }
@@ -107,4 +104,3 @@ page {
 }
 
 </style>
-

src/pages/splash/index.vue

@@ -0,0 +1 @@
+$bem-component-namespace: 'md';