less、Element-UI等安装配置

一、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表示该文件类型需要调用的loader
                        use:['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表示该文件类型需要调用的loader
                        use:['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表示该文件类型需要调用的loader
                    use:['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);