彩蛋:后台管理系统一站式平台模板
vue-admin-wonderful,一套为开发者快速开发准备的基于 vue2.x 越看越精彩的后台管理系统一站式平台模板。基于element ui 2.14.0
1、使用 cnpm run eject 命令暴露 webpack.config.js
2、页面已经有 验证规则,less 没有,所以添加 less 的
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
3、依葫芦画瓢,复制一份 sass 的,如下代码:复制粘贴到 sassModuleRegex 的后面
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'less-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.less or .module.less
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'less-loader'
),
},
4、分别安装 sass、less 依赖
cnpm install node-sass
cnpm install less-loader --save
5、yarn start 重新编译,根目录 index.js 中引入,如下图:
import './assets/style/public.scss';
import './assets/style/title.less';
6、页面使用,如下图: