0

我正在尝试为 Nuxt 应用程序设置赛普拉斯组件测试。它有效，但我的样式几乎都不起作用，因为它们依赖于 Tailwind 和我的 custom 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所有组件测试中包含一个额外的全局文件？

4

1 回答 1

1

您可以通过将样式直接导入到测试文件中来使样式生效，如下所示：

// YourComponent.spec.js
import 'tailwindcss/dist/tailwind.min.css'
import '@/assets/css/tailwind.css'

我也在寻找一种在全球范围内添加这些样式的方法，所以如果我找到了一些东西，我一定会在这里发布。

更新的答案

将以下内容添加到文件中的构建设置中nuxt.config.js。

// nuxt.config.js

import { join } from 'path'

...

plugins: {
  tailwindcss: join(__dirname, 'tailwind.config.js'),
  ...
},

如果您jit为 tailwindcss 启用了模式，请确保将适当的清除路径添加到您的 tailwind 配置中。对我来说，它是在无限循环中加载的，在更具体地指定了这些路径之后，它被整理出来了。另请参阅顺风文档。

// tailwind.config.js

purge: [
  './components/**/*.vue', 
  './layouts/**/*.vue', 
  './pages/**/*.vue'
],
于 2021-11-01T11:50:45.333 回答