如何将基金会断点实用程序导入 Vue-CLI 项目?

Question

尝试将基金会断点实用程序导入 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';

主.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

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

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

{
"includePaths": [ "node_modules" ]
}

2. 从_custom.scss中删除了@import '~foundation-sites/scss/util/breakpoint';。

3. 将vue.config.js更改为此(导入整个基础库(：

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

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