Vue2.0开发之——webpack基础-less-loader插件(07)

发表于 分类于 ， ， 阅读时长 ≈ 1 分钟

一 概述

  • 示例导入less文件修改样式
  • less-loader的安装与配置
  • less-loader打包处理less后的效果

二 示例导入less文件修改样式

1-css文件夹下，添加index.less样式文件

1
2
3
4
5
6
7
8
9
html,body,ul{
    margin: 0;
    padding: 0;
    li{
        line-height: 30px;
        padding-left: 20px;
        font-size: 12px;
    }
}

2-index.js中导入index.less样式文件

1
import './css/index.less'

3-执行npm run dev查看效果

1
2
3
4
5
6
Compiled with problems:X

ERROR in ./src/css/index.less 1:12

Module parse failed: Unexpected token (1:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

说明：缺少处理.less文件的less-loader，后面介绍如何解决此问题

三 less-loader的安装与配置

3.1 less-loader的安装

1
npm install less less-loader -D(--save-dev)

安装完成后，package.json->devDependencies配置

1
2
3
4
"devDependencies": {
    "less": "^4.1.3",
    "less-loader": "^11.1.0",
 },

3.2 在webpack.config.js的module->rules数组中，添加loader规则

1
2
3
4
5
6
7
8
9
10
module: { //所有第三方文件模块的匹配规则
        rules: [ //文件后缀名的匹配规则
            {
                test: /\.css$/, use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/,use: ["style-loader","css-loader","less-loader",],
            },
        ]
}

四 less-loader打包处理less后的效果

五 参考

webpack-less-loader