my build tool uses fis3, using fis.hook ("node_modules"). Can be directly in the page import NPm package, but the CSS style has not been introduced, ask God to help analyze it.
I reported an error. When packing a VuE file,
Can"t resolve mint-ui/packages/cell/style.css
in file [/ node_modules/mint-ui/lib/mint-ui.common.js]
cannot package the style part of js.
the environmental background of the problems and what methods you have tried
now my solution is to manually introduce mint-ui "s CSS in the required pages, which is just an impossible solution
related codes
/ / Please paste the code text below (do not replace the code with pictures)
/ / Server receive file configuration
var RECEIVER =" http://115.182.215.48/receive.";
/ / Test environment target address
var TARGET_PATH ="/ home/work/spw/app/cx-vrm-h5/fe-test-qa/webroot";
/ / two configuration modes
var deployConfig = {
// debug
"debug": {
qa: ""
}
};
var namespace = "";
/ Project name
/ / fis.set ("namespace", "groupon");
/ / compilation of single-file components that support vue
fis.set ("project.fileType.text"," vue");
/ / ignore the compilation file
fis.set ("project.ignore", [
"/node_modules/**",
".DS_store",
"npm-debug.log",
"package.json",
"**.md",
"/test/**",
"karma.conf.js",
"/coverage/**",
"fis-conf.js"
]);
fis.match (":: package", {
)postpackager: fis.plugin( "loader", {
ignore: [ "common/static/js/mod/mod.js" ],
allInOne: true, // jscss
sourceMap: true, //map
useInlineMap: true, //sourcemap
} )
});
/ language parsing and compiling
}); / / Vue compiles }); / / vilify compression, babel compilation, backward compatibility, support vue compilation }); / / less compiles }); / / CSS compression }); / / Image compression }); / / csssprites }); / / homonym dependency }); / / fis3 does not come with modular development support by default, and the commonjs specification is used in conjunction with mod.js as a modular development. }); }); / / disable fis components / < strong Directory specification and publishing configuration < / strong
} how to change files or NPM introduced to a third party in the configuration, such as mint-ui parser: fis.plugin( "less" ),
rExt: ".css"
fis.match ("* * .vue", {rExt: ".js",
isMod: true,
useSameNameRequire: true,
parser: fis.plugin( "vue-component", {
cssScopeFlag: "vuec"
} )
fis.match ("{ .js, .vue: js}", {isMod: true,
optimizer: fis.plugin( "uglify-js" ),
parser: [
fis.plugin( "babel-5.x" ),
fis.plugin( "translate-es3ify", null, "append" )
]
/ / .vue file, less parses
/ / automatically completes compatible prefixes
fis.match ("{ .less, .vue: less}", {rExt: "css",
parser: [ fis.plugin( "less-2.x" ) ],
postprocessor: fis.plugin( "autoprefixer", {
"browsers": [ "Firefox >= 20", "Safari >= 6", "IOS >= 6", "Chrome >= 12", "Android >= 2.2" ]
} )
fis.match ("* *. {css,less}", {optimizer: fis.plugin( "clean-css" )
fis.match ("*. {png,jpg}", {optimizer: fis.plugin( "png-compressor" )
fis.match (":: package", {spriter: fis.plugin( "csssprites" )
fis.match ("* *", {useSameNameRequire: true
/ / reference https://github.com/fex-team/f.
fis.hook( "commonjs", {extList: [".js", ".jsx", ".es", ".ts", ".tsx",".vue"],
paths: {
// vuenpm.main
// Vue
Vue: "./node_modules/vue/dist/vue.js",
"mint-ui":"./node_modules/mint-ui",
JsBarcode: "./node_modules/jsbarcode/dist/JsBarcode.all.js",
},
packages: [ {
name: "lib",
location: "./src/lib"
},
{
name: "pages",
location: "./client/pages"
},
{
name: "common",
location: "./common"
},
{
name: "root",
location: "./"
},
{
name: "js",
location: "./common/static/js"
}, {
name: "ui",
location: "./common/widget/ui"
}
]
fis.match ("/ {node_modules} / *. Js", {isMod: true,
useSameNameRequire: true
fis.unhook ("components")
fis.hook (" node_modules") fis.media( i )
.match( "**.html", {
useHash: false,
release: namespace + "$0",
deploy: [ fis.plugin( "skip-packed" ),
fis.plugin( "http-push", {
receiver: RECEIVER,
to: TARGET_PATH + deployConfig.debug[ i ]
} )
]
} )
// js, css hash
.match( "**.{js,css,less,vue}", {
isMod: true,
useHash: true,
optimizer: null,
release: namespace + "/static/$0", // /static
deploy: [ fis.plugin( "http-push", {
receiver: RECEIVER,
to: TARGET_PATH + deployConfig.debug[ i ]
} ),
//
// fis.plugin("skip-packed")
]
} )
.match( "common/static/js/mod/mod.js", {
isMod: false,
parser: null
} )
//
.match( "common/static/fonts/*", {
useHash: true,
release: namespace + "/static/$0", // /static
deploy: [ fis.plugin( "skip-packed" ),
fis.plugin( "http-push", {
receiver: RECEIVER,
to: TARGET_PATH + deployConfig.debug[ i ]
} )
]
} )
//
.match( "**.{png,jpg,gif}", {
useHash: true,
release: namespace + "/static/images/$0", // /static
useSprite: false,
deploy: [ fis.plugin( "skip-packed" ),
fis.plugin( "http-push", {
receiver: RECEIVER,
to: TARGET_PATH + deployConfig.debug[ i ]
} )
]
} )
what result do you expect? What is the error message actually seen?