javascript - 在 Cypress 内部的已转换Vue组件中加载CSS样式表

因此，我目前已将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));
}

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

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

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

Cypress 内部看起来像这样:



但是，在Webpack的dev-server中运行时，它看起来像这样:



通常在使用 Cypress 时，如何将CSS注入(inject)SFC？ Cypress 插件的webpack配置是否错误？

最佳答案

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

所以这:

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

应该是这样的:

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

关于javascript - 在 Cypress 内部的已转换Vue组件中加载CSS样式表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51884053/