在Cypress中加载已转译的Vue组件中的CSS样式表
在Cypress中加载已转译的Vue组件中的CSS样式表
提问于 2018-08-17 03:21:36
因此，我目前已经将Cypress设置为使用vue-loader通过Cypress的webpack嵌入式预处理器(webpack-预处理器)来加载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文件在Cypress内部运行时不能作为测试的SFC的一部分加载/包含。
因此，如果我对Vue SFC的脚本部分中的Pikaday选取器执行此操作：
import Pikaday from "pikaday";
import "pikaday/css/pikaday.css";在Cypress内部看起来是这样的：
但是，在Webpack的dev-server中运行时，它看起来是这样的：
通常使用Cypress时，CSS是如何注入SFC的？我的Cypress插件的webpack配置是不是错了？
回答 1
Stack Overflow用户
发布于 2018-08-17 03:36:43
为了在Cypress中包含/导入来自css-loader的CSS文件，你需要在SFCs之前使用SFCs加载器。
所以这就是：
...
{
test: /\.css$/,
use: [ 'css-loader' ]
}
....应该是这样：
...
{
test: /\.css$/,
use: ['vue-style-loader', 'css-loader' ]
}
....页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51884053
复制相关文章
相似问题