- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在一个新项目中使用 Vue CLI 3 和 Vuetify 2.1,最近深入研究了覆盖 Vuetify's SASS variables 。终于开始工作后,我意识到每次修改我创建的 variables.scss
文件并重新编译项目时,都需要近 5 分钟才能完成编译。我尝试更新 package.json 脚本来增加 Node 正在使用的内存,虽然这修复了我收到的导致编译崩溃的错误,但结果现在编译时间非常慢。显示的进度(我使用 Foreman 同时运行我的 Rails API 和 Vue 服务器)如下所示:
17:47:29 web.1 | <s> [webpack.Progress] 69% building 916/930 modules 14 active /<path/to/app>/frontend/node_modules/css-loader/index.js??ref--9-oneOf-3-1!/<path/to/app>/frontend/node_modules/postcss-loader/src/index.js??ref--9-oneOf-3-2!/<path/to/app>/frontend/node_modules/sass-loader/lib/loader.js??ref--9-oneOf-3-3!/<path/to/app>/frontend/node_modules/vuetify/src/components/VSwitch/VSwitch.sass
正如我提到的,这些进度加载大约五分钟后才最终完成。我的猜测是,因为我更新了一个变量,所以它必须遍历并更新 Vuetify node_module 中该变量的每个组件和实例的样式。
我的问题是是否有任何方法可以加快速度?也许我设置错误导致了这个问题?或者这是完全正常的,我只需要处理它?</p>
main.js
import Vue from 'vue';
import App from './App.vue';
import { router } from './router';
import store from './_store';
import vuetify from './plugins/vuetify';
Vue.config.productionTip = false;
new Vue({
router,
store,
vuetify,
render: h => h(App),
}).$mount('#app');
vuetify.js
import 'material-design-icons-iconfont/dist/material-design-icons.css';
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
Vue.use(Vuetify);
export default new Vuetify({
theme: {
options: {
customProperties: true,
},
themes: {
light: {
primary: '#4A90E2',
darkPrimary: '#3B73B4',
secondary: '#424242',
accent: '#82B1FF',
error: '#a70000',
info: '#2196F3',
success: '#4CAF50',
warning: '#FFC107',
teal: '#64EBC6',
green: '#7ED321',
darkGreen: '#4c8f1d',
lightGrey: 'rgba(0,0,0,0.12)',
darkGrey: '#4A4A4A',
textSecondary: 'rgba(0,0,0,0.4)',
},
},
},
icons: {
iconfont: 'md',
},
});
变量.scss
// Globals
$border-radius-root: 2px;
// $font-size-root: 14px;
$body-font-family: 'Avenir Next', 'Lato', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif; // $main-font comes from my own ./_variables.scss.
$heading-font-family: 'Avenir Next', 'Lato', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif; // $title-font comes from my own ./_variables.scss.
$headings: (
'h1': (
'size': 3.3125rem,
'line-height': 1.15em
),
'h2': (
'size': 2.25rem,
'line-height': 1.5em,
),
'h3': (
'size': 1.5625rem,
'line-height': 1.4em
),
'h4': (
'size': 1.125rem,
'line-height': 1.4em
),
'h5': (
'size': 1.0625rem
),
'h6': (
'size': .75rem
),
'subtitle-2': (
'size': 1rem
),
'overline': (
'letter-spacing': 0
)
);
@import '~vuetify/src/styles/settings/variables';
// V-Btn
$btn-letter-spacing: 1px;
@import '~vuetify/src/components/VBtn/_variables';
@import '~vuetify/src/styles/main.sass';
package.json
{
"name": "myProject",
"version": "0.1.0",
"private": true,
"scripts": {
"serve" : "node --max_old_space_size=4096 node_modules/.bin/vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.19.0",
"core-js": "^2.6.5",
"dayjs": "^1.8.16",
"echarts": "^4.3.0",
"fibers": "^4.0.1",
"material-design-icons-iconfont": "^5.0.1",
"sass": "^1.23.0",
"sass-loader": "7.1.0",
"vee-validate": "^3.0.11",
"vue": "^2.6.10",
"vue-router": "^3.0.3",
"vuedraggable": "^2.23.2",
"vuetify": "^2.1.0",
"vuex": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.12.0",
"@vue/cli-plugin-eslint": "^3.12.0",
"@vue/cli-service": "^3.12.0",
"@vue/eslint-config-airbnb": "^4.0.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"vue-cli-plugin-vuetify": "^1.0.1",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.2.2"
}
}
最佳答案
@import '~vuetify/src/styles/main.sass';
这会将相当大量的 CSS 注入(inject)到每个 sass 文件的顶部,因此它会重复数百次。变量文件不应包含任何输出实际样式的代码 - 只允许变量、混合和函数。
然而,修改变量文件时 30+ 秒是正常的,正如您猜测的那样,在这种情况下它必须重新编译所有内容。从vuetify/lib/framework
而不是
vuetify/lib
导入可能会通过仅在开发包中包含使用过的组件来加快速度。
关于webpack - Vuetify 2.1 和 Webpack 的编译时间极长,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58441782/
我正在寻找绘制极坐标数据的替代方法。我需要实现像 this 这样的图表具有动态选项,例如 this . 非常感谢您的帮助! 最佳答案 我个人需要这些: Highcharts JS canvasXpre
我是一名优秀的程序员,十分优秀!