在 Cypress 内的转译 Vue 组件中加载 CSS 样式表答案

【问题标题】：Loading CSS stylesheets in transpiled Vue components inside Cypress在 Cypress 内的转译 Vue 组件中加载 CSS 样式表
【发布时间】：2018-08-16 19:21:36
【问题描述】：

因此，我目前已将 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 中运行时，通过 import/require (css-loader) 从 node_modules 导入的 CSS 文件未作为某些经过测试的 SFC 的一部分加载/包含。

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

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

Cypress 内部是这样的：

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

通常在使用 Cypress 时如何将 CSS 注入到 SFC 中？我的 Cypress 插件的 webpack 配置是否错误？

【问题讨论】：

标签： javascript webpack vue.js cypress

【解决方案1】：

为了在赛普拉斯中包含/导入来自 SFC 的 CSS 文件，您需要在 css-loader 之前使用 vue-style-loader CSS 加载器。

所以这个：

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

应该是这样的：

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

【讨论】：