javascript - 在 Cypress 中的转译 Vue 组件中加载 CSS 样式表

Question

因此，我目前将 Cypress 设置为使用 vue-loader 通过 Cypress 的 webpack 嵌入式预处理器(webpack-preprocessor)加载 Vue SFC。这是它的配置。

const webpack_vue_cypress_config = {
  webpackOptions: {
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: vue_config
        },{
          test: /\.css$/,
          use: [ 'css-loader' ]
        }
      ],
    },
    resolve: {
      extensions: ['.js', '.vue', '.json'],
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': "../../",
      }
    }
  },
  watchOptions: {},
}

module.exports = (on, config) => {
    on("file:preprocessor", webpack(webpack_vue_cypress_config));
}

我目前面临的问题是，通过 import/require (css-loader) 从 node_modules 导入的 CSS 文件没有加载/包含在某些测试的 SFC 中在 Cypress 内部运行。

所以，如果我在 Vue SFC 的脚本部分中为 Pikaday 选择器执行此操作:

import Pikaday from "pikaday";
import "pikaday/css/pikaday.css";

在 Cypress 内部看起来像这样:

但是，当在 Webpack 的开发服务器中运行时，它看起来像这样:

通常使用 Cypress 时如何将 CSS 注入(inject)到 SFC 中？我的 Cypress 插件的 webpack 配置有误吗？

Answer 1

为了从 SFC 中包含/导入 Cypress 中的 CSS 文件，您需要在 css-loader 之前使用 vue-style-loader CSS 加载器。

所以这样:

...
{
    test: /\.css$/,
    use: [ 'css-loader' ]
}
....

应该是这样的:

...
{
    test: /\.css$/,
    use: ['vue-style-loader', 'css-loader' ]
}
....