vue.js - Buefy 对 Sass 样式没有反应
问题描述
初学者在这里...我有一个简单的 Vue (2) 应用程序并安装了 node-sass 和 sass-loader。按照此处的说明进行操作。
Buefy 在 main.js 中导入,这是(我的下部)App.vue:
<style lang="scss">
// Import Bulma's core
@import "~bulma/sass/utilities/_all";
// Set your colors
$primary: #8c67ef;
$primary-light: findLightColor($primary);
$primary-dark: findDarkColor($primary);
$primary-invert: findColorInvert($primary);
$twitter: #4099FF;
$twitter-invert: findColorInvert($twitter);
// Lists and maps
$custom-colors: null !default;
$custom-shades: null !default;
// Setup $colors to use as bulma classes (e.g. 'is-twitter')
$colors: mergeColorMaps(
(
"white": (
$white,
$black,
),
"black": (
$black,
$white,
),
"light": (
$light,
$light-invert,
),
"dark": (
$dark,
$dark-invert,
),
"primary": (
$primary,
$primary-invert,
$primary-light,
$primary-dark,
),
"link": (
$link,
$link-invert,
$link-light,
$link-dark,
),
"info": (
$info,
$info-invert,
$info-light,
$info-dark,
),
"success": (
$success,
$success-invert,
$success-light,
$success-dark,
),
"warning": (
$warning,
$warning-invert,
$warning-light,
$warning-dark,
),
"danger": (
$danger,
$danger-invert,
$danger-light,
$danger-dark,
),
),
$custom-colors
);
// Links
$link: $primary;
$link-invert: $primary-invert;
$link-focus-border: $primary;
// Import Bulma and Buefy styles
@import "~bulma";
@import "~buefy/src/scss/buefy";
</style>
所以我运行npm run serve - 我的应用程序运行良好 - 但只有默认的 Bulma 样式。那就是 - 如果我添加:
<style lang="css">
.somestyle {
color: red;
}
</style>
...然后点击“保存” - 应用程序以正确的样式加载。但是,如果我在浏览器中点击刷新 - 自定义样式就会消失,我会回到原来的 Bulma 样式。基本上,我无法让自定义 scss “坚持”。
我已经在另一个应用程序中使用了(据我所知)完全相同的设置!这个问题让我很头疼:-/
"vue": "^2.6.12",
"buefy": "^0.9.4",
"bulma": "^0.9.3",
"node-sass": "^5.0.0",
"sass-loader": "^10.1.0"
不知道这里还包括什么 - 但任何想法都会非常感激!
解决方案
我认为问题可能实际上是您没有全局连接变量。
https://vue-loader.vuejs.org/guide/pre-processors.html#sharing-global-variables
这是我连接Bulma
到我的Vue
项目的方式,我认为您可以在连接时使用相同的模式Buefy
:
// main.ts
import '@/assets/scss/main.scss'
// main.scss file
@import "~bulma";
@import "./_variables.scss";
// _variables.scss file
...all my sass-variables...
@import "~bulma/sass/utilities/_all";
// vue.config.js
module.exports = {
css: {
loaderOptions: {
scss: {
prependData: '@import "~@/assets/scss/_variables.scss";'
}
}
}
}
推荐阅读
- git - 使用 git-gui 拉/推子模块提交
- frameworks - 杀死 pid Jenkinsfile Jenkins
- python-3.x - 试图弄清楚如何根据另一列的行值转换特定列中的某些值
- node.js - 不显示 Firebase Cloud Functions 默认日志行
- azure - IdentityServer 4 with .net Core Identity:在 Azure 上发布代码更新会使刷新令牌无效,尽管使用了数据保护
- c# - 如何在启动 c# 时更改进程名称(完全)
- javascript - 创建反应应用程序有效,但没有提供入门代码
- c# - 给定一个整数和要使用的位数,格式化一个整数
- azure - 用于控制台应用程序 Web 作业的 Azure Key Vault
- perl - 如何重新定位 PDF 的页面元素并写入新的 PDF?