使用 Tailwind 对 Nuxt 进行赛普拉斯组件测试
Cypress component tests for Nuxt with Tailwind
我正在尝试为 Nuxt 应用程序设置 Cypress 组件测试。它有效,但我的样式几乎 none 有效,因为它们依赖于 Tailwind 和我的自定义 tailwind.config.js
.
这是我的 cypress/plugins/index.js
:
const { startDevServer } = require('@cypress/webpack-dev-server');
const { getWebpackConfig } = require('nuxt');
module.exports = (on, config) => {
on('dev-server:start', async (options) => {
const webpackConfig = await getWebpackConfig();
return startDevServer({
options,
webpackConfig,
});
});
return config;
};
如何在自定义配置中包含 Tailwind?当我们在做的时候:如何在我的所有组件测试中包含一个额外的全局 .scss
文件?
您可以通过将样式直接导入到您的测试文件中来使您的样式生效,如下所示:
// YourComponent.spec.js
import 'tailwindcss/dist/tailwind.min.css'
import '@/assets/css/tailwind.css'
我也在研究一种在全局范围内添加这些样式的方法,所以如果我找到了一些东西,我会确保 post 在这里。
更新答案
将以下内容添加到 nuxt.config.js
文件中的构建设置。
// nuxt.config.js
import { join } from 'path'
...
plugins: {
tailwindcss: join(__dirname, 'tailwind.config.js'),
...
},
如果您为 tailwindcss 启用了 jit
模式,请确保将适当的清除路径添加到您的 tailwind 配置中。对我来说,它正在无限循环中加载,在更具体地指定这些路径后,它被整理出来了。另见 tailwind docs.
// tailwind.config.js
purge: [
'./components/**/*.vue',
'./layouts/**/*.vue',
'./pages/**/*.vue'
],
我正在尝试为 Nuxt 应用程序设置 Cypress 组件测试。它有效,但我的样式几乎 none 有效,因为它们依赖于 Tailwind 和我的自定义 tailwind.config.js
.
这是我的 cypress/plugins/index.js
:
const { startDevServer } = require('@cypress/webpack-dev-server');
const { getWebpackConfig } = require('nuxt');
module.exports = (on, config) => {
on('dev-server:start', async (options) => {
const webpackConfig = await getWebpackConfig();
return startDevServer({
options,
webpackConfig,
});
});
return config;
};
如何在自定义配置中包含 Tailwind?当我们在做的时候:如何在我的所有组件测试中包含一个额外的全局 .scss
文件?
您可以通过将样式直接导入到您的测试文件中来使您的样式生效,如下所示:
// YourComponent.spec.js
import 'tailwindcss/dist/tailwind.min.css'
import '@/assets/css/tailwind.css'
我也在研究一种在全局范围内添加这些样式的方法,所以如果我找到了一些东西,我会确保 post 在这里。
更新答案
将以下内容添加到 nuxt.config.js
文件中的构建设置。
// nuxt.config.js
import { join } from 'path'
...
plugins: {
tailwindcss: join(__dirname, 'tailwind.config.js'),
...
},
如果您为 tailwindcss 启用了 jit
模式,请确保将适当的清除路径添加到您的 tailwind 配置中。对我来说,它正在无限循环中加载,在更具体地指定这些路径后,它被整理出来了。另见 tailwind docs.
// tailwind.config.js
purge: [
'./components/**/*.vue',
'./layouts/**/*.vue',
'./pages/**/*.vue'
],