专栏首页wfaceboss(11/24) css进阶:Less文件的打包和分离

(11/24) css进阶:Less文件的打包和分离

写在前面:在前面我们对css打包分离进行了描述。此节我们开始学习如何对less文件进行打包和分离。

Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。 Less知识学习

1.Less文件的打包处理

1.1 在src/index.html文件中新增一个标签,样式采用less编写。

  <div id="less_part">less</div>

1.2 在css目录下新建一个less文件,此处为black.less

@base :#000;
#less_part{
  width:300px;
  height:300px;
  background-color:@base;
}

@base是我们设置的变量名称。

1.3 在src目录下的entry.js中引入less文件

import less from './css/black.less'

1.4 安装Less的服务

要使用Less,我们要首先安装Less的服务,当然也是用npm来进行安装或者cnpm来安装。

npm install --save-dev less

还需要安装Less-loader用来打包使用。

1.5 Less-loader安装

npm  install --save-dev less-loader

1.6 配置loader

安装好后,需要在webpack.config.js里编写loader配置,当然要想正确解析成css,还是需要style-loader和css-loader的帮助,但是这两个loader前边已经讲过了,所以在这里就不重复了,style-loader和css-loader学习

webpack.config.js:

 //针对.less的处理配置
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                },{
                    loader: "less-loader" // compiles Less to CSS
                }]
            },

注意上面loader的顺序,不要写反了。

1.7 打包+启动服务

使用webpack命令进行打包,此时我们可以发现,相关的样式被打包到了js当中。当然这是正确的,我们可以使用npm run server命令启动服务,最终也能正常渲染页面,我们的less样式被正确引用。

 渲染效果:

在实际开发中我们可能会把想相关的css文件与js文件分离开来,以便管理,此处我们把Lees文件进行分离。

2.分离Less文件

在上一节当中我们学习了extract-text-webpack-plugin这个插件,也是需要通过这个插件来实现less文件的分离。 插件的使用

更改上述webpack.config.js文件中针对less文件的配置(使用分离的配置),修改后的代码为:

   {
                test: /\.less$/,
                use: extractTextPlugin.extract({
                    use: [{
                        loader: "css-loader"
                    }, {
                        loader: "less-loader"
                    }],
                    // use style-loader in development
                    fallback: "style-loader"
                })
            },

配置好后,使用webpack命令进行打包,此时less编写的样式被分离到了index.css文件里(配置的css打包路径)。

然后使用npm run server命令重新启动服务,渲染效果与上面一致。

部分源码:

webpack.config.js:

const path = require('path');
const uglify = require('uglifyjs-webpack-plugin');
const htmlPlugin= require('html-webpack-plugin');
const extractTextPlugin = require("extract-text-webpack-plugin");
var website ={
    publicPath:"http://localhost:1818/"
}
module.exports={
    //入口文件的配置项
    entry:{
        entry:'./src/entry.js',
        //这里我们又引入了一个入口文件
        entry2:'./src/entry2.js',
    },
    //出口文件的配置项
    output:{
        //输出的路径,用了Node语法
        path:path.resolve(__dirname,'dist'),
        //输出的文件名称
        filename:'[name].js',
        publicPath: website.publicPath
    },
    //模块:例如解读CSS,图片如何转换,压缩
    module:{
        rules: [
            //针对.css的处理配置
            {
                test: /\.css$/,
                use: extractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            //针对.less的处理配置
            {
                test: /\.less$/,
                use: extractTextPlugin.extract({
                    use: [{
                        loader: "css-loader"
                    }, {
                        loader: "less-loader"
                    }],
                    // use style-loader in development
                    fallback: "style-loader"//extract默认行为先使用css-loader编译css,如果一切顺利的话,结束之后把css导出到规定的文件去。但是如果编译过程中出现了错误,则继续使用vue-style-loader处理css
                })
            },
            {
                test:/\.(png|jpg|gif)/,
                use:[{
                    loader:'url-loader',
                    options:{
                        limit:50,
                        outputPath:'images/'//图片打包到images下
                    }
                }
                ]
            },
            {
                test: /\.(htm|html)$/i,
                use:[ 'html-withimg-loader']
            }
        ]
    },
    //插件,用于生产模版和各项功能
    plugins:[
        // new uglify(),
        new htmlPlugin({
            minify:{
                removeAttributeQuotes:true
            },
            hash:true,
            template:'./src/index.html'
        }),
        new extractTextPlugin("css/index.css")
    ],
    //配置webpack开发服务功能
    devServer:{
        contentBase:path.resolve(__dirname,'dist'), //绝对路径
        host:'localhost',
        compress:true,
        port:1818
    }
}

src/css/black.less:

@base :#000;
#less_part{
  width:300px;
  height:300px;
  background-color:@base;
}

src/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webpack</title>
</head>
<body>
<div>
    <div id="less_part">less</div>

    <img src="images/wfbin.png"/></div>
<div id="img"></div>
<div id="title"></div>
</body>
</html>

src/entry.js(入口文件):

import css from './css/index.css'
import less from './css/black.less'
document.getElementById('title').innerHTML='Hello Webpack';

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • (12/24) css进阶:sass文件的打包和分离

    这里需要 在项目目录下用npm安装两个包。node-sass和sass-loader,(也可以使用cnpm安装)

    wfaceboss
  • (8/24) 图片跳坑大战--css中的图片处理

    前言:此节的开展是在上一节的基础上进行的,(每一节都是从无到有编写关于此节的知识),最后会附上相关完整代码。上一节

    wfaceboss
  • (5/24) 模块化:实现快速CSS文件打包

    写在前面:为了兼容,此处的webpack版本为3.6.0、webpack-dev-server版本为2.9.7、css-loader版本为2.0.0、style...

    wfaceboss
  • vue 开发常用工具及配置六:认识各种 loader

    默认 webpack 只能处理 js 文件,如果在 js 文件中导入了 css 代码:

    李艺
  • 走近webpack(4)--css相关拓展

      我们前面已经学了很多webpack基本的处理情况,一句话总结就是,一个优秀的webpack项目,主要的核心用法就是整合loader和plugin去处理你想要...

    zaking
  • Webpack2 升级指南和特性摘要

    历时多日,webpack2.2正式版终于赶在年前发布了,此次更新相对于1.X版本有了诸多的升级优化改进,笔者也在第一时间查阅了官方的文档,整理和翻译了由webp...

    前端博客 : alili.tech
  • webpack实战——预处理器(loader)【上篇】

    当使用 babel-loader 将 ES6+ 代码转化为 ES5 时,带入公式:

    流眸
  • webpack项目轻松混用css module

    本文讲述css-loader开启css模块功能之后,如何与引用的npm包中样式文件不产生冲突。 比如antd-mobilenpm包的引入。在不做特殊处理的前提下...

    我是leon
  • 关于网页开发webpack基本配置.

    杭州前端工程师
  • Webpack+vue+boostrap+ejs构建Web版GM工具

    Web前端的组件技术刷新真的是日新月异,前段时间看到很多童鞋分享了webpack的使用,刚好之前做我们游戏里Web版的GM工具的时候正在想怎么用简单的方式,做模...

    owent

扫码关注云+社区

领取腾讯云代金券