如何将 Foundation 断点工具导入到 Vue-CLI 项目中？

Question

尝试将 Foundation 断点实用程序导入 Vue-CLI 以供每个组件使用但出现错误：

SassError: (small: 0, medium: 640px, large: 1024px, xlarge: 1200px, xxlarge: 1440px) isn't a valid CSS value.
   ╷
36 │ $-zf-breakpoints-keys: map-to-list($breakpoints, 'keys');
   │                                    ^^^^^^^^^^^^
   ╵
  node_modules/foundation-sites/scss/util/_breakpoint.scss 36:36  @import
  src/scss/_custom.scss 4:9

我的设置如下所示：

vue.config.js:

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: `@import "~@/scss/_custom.scss";`
      }
    }
  },
}

_custom.scss:

@import '~foundation-sites/scss/util/breakpoint';

main.js:

import Vue from 'vue'
import App from './App.vue'
import "./components";
import './scss/app.scss';

new Vue({
  render: h => h(App),
}).$mount('#app')

app.scss:

@import '~foundation-sites/scss/util/util';
@import 'global';
@import '~foundation-sites/scss/foundation';

Answer 1

我的同事设法解决了这个问题。

在项目根文件夹中创建了一个名为 .sassrc:

{
  "includePaths": [ "node_modules" ]
}

已从 _custom.scss.
中删除 @import '~foundation-sites/scss/util/breakpoint';
将vue.config.js更改为（导入整个基础库）：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `
          @import "~@/scss/_custom.scss";
          @import 'foundation-sites/scss/foundation';
        `
      }
    }
  }
}

现在断点 util 可以在每个 Vue 组件中使用 css。

如何将 Foundation 断点工具导入到 Vue-CLI 项目中？

How to import Foundation breakpoint util into Vue-CLI project?

zurb-foundation

webpack

vue.js

vue-cli