未能以最激烈的方式加载vuetify样式表
未能以最激烈的方式加载vuetify样式表
提问于 2022-07-01 00:30:15
我开始用Nuxt 3和Vuetify 3创建一个应用程序，这个web应用程序运行得很好。
现在，当我得到一个类似于Can't find stylesheet to import的错误时，我开始使用vitest编写页面的单元测试。(组件的单元测试和状态管理工作正常)
我们使用Nuxt 3，Vuetify 3，类型记录，pinia和最具活力的应用程序开发。
vitest.config.ts
import {defineConfig} from 'vite';
import Vue from '@vitejs/plugin-vue';
import Vuetify from '@vuetify/vite-plugin';
export default defineConfig({
plugins: [Vue(), Vuetify({styles: 'sass'})],
resolve: {
alias: {
'@@': __dirname,
},
},
test: {
globals: true,
environment: 'jsdom',
deps: {
inline: [/@nuxt\/test-utils-edge/],
},
},
});nuxt.config.ts
import {defineNuxtConfig} from 'nuxt';
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
typescript: {
typeCheck: 'build',
strict: true,
},
css: ['vuetify/lib/styles/main.sass', 'mdi/css/materialdesignicons.min.css'],
build: {
transpile: ['vuetify'],
},
vite: {
define: {
'process.env.DEBUG': false,
},
},
buildModules: ['@pinia/nuxt'],
});测试/页/导出/index.test.ts(测试)
import {describe, test, expect} from 'vitest';
import {setup, $fetch} from '@nuxt/test-utils-edge';
describe('exportPage', async () => {
await setup({
server: true,
});
test('Check export title', async () => {
const html = await $fetch('/export');
expect(html).toContain('Export data');
});
});依赖关系
"devDependencies": {
"@nuxt/test-utils-edge": "3.0.0-rc.4-27588443.cf25525",
"@nuxtjs/composition-api": "0.32.0",
"@nuxtjs/eslint-config-typescript": "^10.0.0",
"@pinia/nuxt": "0.1.9",
"@typescript-eslint/eslint-plugin": "^5.27.1",
"@typescript-eslint/parser": "^5.27.1",
"@vue/eslint-config-standard": "^7.0.0",
"@vue/test-utils": "2.0.0",
"@vuetify/vite-plugin": "^1.0.0-alpha.11",
"eslint": "^8.17.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-nuxt": "^3.2.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^9.1.0",
"jsdom": "^20.0.0",
"mdi": "2.2.43",
"nuxt": "3.0.0-rc.4",
"pinia": "2.0.14",
"prettier": "^2.6.2",
"sass": "1.52.3",
"typescript": "4.7.3",
"vitest": "0.15.1",
"vuetify": "3.0.0-beta.4"
}试验故障筛
如何导入vuetify样式表才是最重要的呢？
如果有人有任何解决方案，请分享。我会感激你的。
回答 1
Stack Overflow用户
发布于 2022-10-04 12:52:04
我也碰到过这个问题。将nuxt.config.ts更改为：
css: ['vuetify/lib/styles/main.sass', 'mdi/css/materialdesignicons.min.css']至：
css: ['vuetify/styles', 'mdi/css/materialdesignicons.min.css']为我做了个小把戏
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72823278
复制相关文章
相似问题
腾讯云开发者
