因此,我目前已经将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配置是不是错了?
发布于 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' ]
}
....
https://stackoverflow.com/questions/51884053
复制相似问题