在赛普拉斯内部的已转换Vue组件中加载CSS样式表

Question

因此，我目前已将Cypress设置为使用files通过针对Cypress的webpack嵌入式预处理器（webpack-preprocessor）加载Vue SFC。这是它的配置。

vue-loader

我目前面临的问题是，在赛普拉斯内部运行时，从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)); } 通过node_modules（css-loader）导入的CSS文件未作为某些经过测试的SFC的一部分进行加载/包含。

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

import/require

在Cypress内部看起来像这样：

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

通常在使用赛普拉斯时，如何将CSS注入SFC？赛普拉斯插件的webpack配置是否错误？

Answer 1

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

所以这个：

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

应该是这样

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