// webpack.config.js
module.exports = {
// ...
resolve: {
// ...
alias: {
// ...
'cube-ui': 'cube-ui/lib'
// ...
}
// ...
}
// ...
}
使用后编译
cube-ui 搭配 webpack 2+ 后就会默认使用后编译，那么应用就需要兼容 cube-ui 的依赖和配置。
1、修改 package.json
{
// webpack-post-compile-plugin 依赖 compileDependencies
"compileDependencies": ["cube-ui"],
"devDependencies": {
"babel-plugin-transform-modules": "^0.0.2",
// 新增 stylus 相关依赖 (都需要额外安装：npm install … -D)
// stylus 类似于 sass,less
"stylus": "^0.54.5",
"stylus-loader": "^2.1.1",
"webpack-post-compile-plugin": "^0.1.2"
}
}
2、修改 .babelrc，依旧依赖babel-plugin-transform-modules：
"plugins": [
["transform-runtime"],
["transform-modules", {
"cube-ui": {
// 注意: 这里的路径需要修改到 src/modules 下
"transform": "./node_modules/cube-ui/src/modules/${member}",
"kebabCase": true
}
}]
]
3、修改 webpack.base.conf.js
var PostCompilePlugin = require('webpack-post-compile-plugin')
module.exports = {
// ...
plugins: [
// ...
new PostCompilePlugin()
]
// ...
}
4、修改 build/utils.js 中的 exports.cssLoaders 函数
exports.cssLoaders = function (options) {
// ...
const stylusOptions = {
'resolve url': true
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus', stylusOptions),
styl: generateLoaders('stylus', stylusOptions)
}
}
运行看看成果：
npm run dev
参考官方文档；体验一下官方给的示例
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持黑区网络。