如何将 Foundation 断点实用程序导入 Vue-CLI 项目？答案

【问题标题】：How to import Foundation breakpoint util into Vue-CLI project?如何将 Foundation 断点实用程序导入 Vue-CLI 项目？
【发布时间】：2020-06-26 17:09:26
【问题描述】：

尝试将 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';

【问题讨论】：

标签： vue.js webpack zurb-foundation vue-cli

【解决方案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';
        `
      }
    }
  }
}

现在断点工具可以在每个具有作用域 css 的 Vue 组件中使用。

【讨论】：