一、less

• 安装less,less-loader处理文件
  npm install less-loader less -D
• 配置规则：
  更改webpack.config.js的module中的rules数组

module.exports = {......plugins:[ htmlPlugin ],module : {rules:[{//test设置需要匹配的文件类型，支持正则test:/\\.css$/,//use表示该文件类型需要调用的loaderuse:[\'style-loader\',\'css-loader\']},{test:/\\.less$/,use:[\'style-loader\',\'css-loader\',\'less-loader\']}]}}

二、sass

• 安装sass-loader,node-sass处理文件
  npm install sass-loader node-sass -D
• 配置规则：
  更改webpack.config.js的module中的rules数组

module.exports = {......plugins:[ htmlPlugin ],module : {rules:[{//test设置需要匹配的文件类型，支持正则test:/\\.css$/,//use表示该文件类型需要调用的loaderuse:[\'style-loader\',\'css-loader\']},{test:/\\.less$/,use:[\'style-loader\',\'css-loader\',\'less-loader\']},{test:/\\.scss$/,use:[\'style-loader\',\'css-loader\',\'sass-loader\']}]}}

三、post-css

• 安装post-css自动添加css的兼容性前缀（-ie-,-webkit-）
  npm install postcss-loader autoprefixer -D
• 创建并配置

const autoprefixer = require(\"autoprefixer\");module.exports = {plugins:[ autoprefixer ]}

• 配置规则：
  更改webpack.config.js的module中的rules数组

module.exports = {......plugins:[ htmlPlugin ],module : {rules:[{//test设置需要匹配的文件类型，支持正则test:/\\.css$/,//use表示该文件类型需要调用的loaderuse:[\'style-loader\',\'css-loader\',\'postcss-loader\']},{test:/\\.less$/,use:[\'style-loader\',\'css-loader\',\'less-loader\']},{test:/\\.scss$/,use:[\'style-loader\',\'css-loader\',\'sass-loader\']}]}}

四、Element-UI

• 安装依赖包
  npm install element-ui –save-dev
• 导入组件库
  import ElementUI from ‘element-ui’;
• 导入组件相关样式
  import ‘element-ui/lib/theme=chalk/index.css’;
• 配置vue插件
  Vue.use(ElementUI);