webpack + less

最新推荐文章于 2024-05-13 15:21:04 发布
最新推荐文章于 2024-05-13 15:21:04 发布
阅读量104 收藏
点赞数
文章标签： webpack ViewUI
原文链接：http://www.cnblogs.com/vipp/p/9896556.html
版权

使用less需要安装 'style-loader','css-loader','less-loader' 三个loader。

安装之后在webpack.config.js配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
  entry: {//入口文件
    app: './src/index.js'
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist'
  },
  plugins:[
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
       title: 'Output Management'
    }),
  ],
  output: {//输出文件
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  module: {
    rules: [
      {
         test: /\.(png|svg|jpg|gif)$/,
         use: [
           'file-loader'
         ]
      },
      {
         test: /\.(less|css)$/,
         use: [
           'style-loader',
           'css-loader',
           'less-loader'
         ]
      },
    ]
  }
};
View Code

执行命令，这个时候会发现样式写在页面<head>标签的里面。

 

如果样式少，这样看着还可以，但是多的话，还是外链的方式比较好，所以我们用 extract-text-webpack-plugin 来进行处理，先安装，接着继续修改配置。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
  entry: {//入口文件
    app: './src/index.js'
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist'
  },
  plugins:[
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
       title: 'Output Management'
    }),
    new ExtractTextPlugin({
      filename: 'index.css',
      disable: false,
      allChunks: true,
    }),
  ],
  output: {//输出文件
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  module: {
    rules: [
      {
         test: /\.(png|svg|jpg|gif)$/,
         use: [
           'file-loader'
         ]
      },
      {
         test: /\.(less|css)$/,
         use: ExtractTextPlugin.extract({
          use:[ 'css-loader','less-loader'],
          fallback: 'style-loader',
        }),
      },
    ]
  }
};
View Code

这时候执行命令结束之后，就会达到我们想要的结果。

 

转载于:https://www.cnblogs.com/vipp/p/9896556.html

Wind542043145
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack搭建less环境
weixin_54249422的博客
07-22 222
1安装依赖 less less 的运行环境 less-loader 将less编译为 css 的loader css-loader 让js解析css代码 mport/require() style-loader 把css插入到dom中 mini-css-extract-plugin 将css离去单独的文件 html-webpack-plugin 打包编译html文件 babel-loader 在webpack中使用bable工具 @
webpack和vite
qq_55686074的博客
05-16 395
构建原理：Vite 利用浏览器内置的 HTTP/2 特性，采用按需编译和实时打包的方式，将每个模块作为单独的文件处理，而 Webpack 采用的则是模块加载器和代码分割机制进行打包，将所有文件打包成几个大文件。未进行代码分割：如果首屏加载的文件过大，会导致首屏渲染时间过长，可以尝试对代码进行分割，优先加载必要文件，延迟加载非必要文件，这样可以提高首屏加载速度。配置复杂度：由于 Webpack 的配置相对较为复杂，需要编写大量的配置文件和插件配置，而 Vite 的配置更加简单，使用起来更加便捷。
「使用 webpack 5 从0到1搭建React + TypeScript 项目环境」2. 集成 css、less 与 sass
p1967914901的博客
01-11 772
「使用 webpack 5 从0到1搭建React + TypeScript 项目环境」2. 集成 css、less 与 sass「使用 webpack 5 从0到1搭建React + TypeScript 项目环境」2. 集成 css、less 与 sass1. 配置 css1.1 开发环境1.2 生产环境2. 使用 CSS modules3. 配置 Less4. 配置 Sass 「使用 webpack 5 从0到1搭建React + TypeScript 项目环境」2. 集成 css、less 与 sa
Vue 教程(二十九)webpack 使用 less 文件
yuan_xw的专栏
08-09 1089
Vue 教程(二十九)webpack 使用 less 文件 什么是 Less Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。 Less 可以运行在 Node 或浏览器端。 webpack 处理.less 文件 编写.less 文件 @charset "UTF-8"; @fontSize: 30px; @fontColor: white; body { font-size: @fontSize; color
webpack打包less语法示例：
qq_36413371的博客
05-13 280
默认情况下，webpack无法直接打包less语法， 需要结合less-loader处理。
webpack使用Less文件的配置
jwz934738949的博客
07-20 6473
Less文件也是一种样式文件，与CSS文件类似，使用时也需要对webpack进行配置。配置步骤如下： 在css文件夹中创建special.less文件，修改字体大小与字体颜色 //定义变量 @fontSize: 40px; @fontColor: white; body { font-size: @fontSize; color: @fontColor; } 在js入口文件中引用less文件，并且在页面上显示内容 require('./css/special.less'); docume
hadoop运行模式（一）
qq_24186017的博客
01-30 437
一.Hadoop的组成：   1）HDFS 分布式文件系统   2）MapReduce 分布式的离线并行计算框架   3）Hadoop YARN:作业调度与集群资源管理的框架   4）支持其他模块的工具模块    二：Hadoop运行环境的搭建：完成以下8步即可 1.虚拟机网络模式设置为NAT 2.克隆虚拟机 3.修改为静态ip [root@hadoop101 /]
一个基于纯 TypeScript + Webpack + Less 实现的迷你 web 版贪吃蛇小游戏
04-05
webpack webpack webpack-cli webpack-dev-server html-webpack-plugin clean-webpack-plugin Babel core-js babel-loader @babel/core @babel/preset-env CSS & Less style-loader css-loader less less-loader ...
React+webpack+redux+ant design+axios+less全家桶后台管理框架.zip
最新发布
06-12
React+webpack+redux+ant design+axios+less 这个组合是现代前端开发中的常见技术栈，用于构建高效、可维护的后台管理框架。以下是对这些技术及其在项目中的应用的详细说明： **React.js** React是Facebook开发的一...
基于React+webpack+redux+ant design+axios+less的全家桶后台管理框架
06-11
node10.15.3 + react@16.12.0 + redux@3.7.2 + react-router@3.2.0 + webpack@4.41.2 + axios@0.19.0 + less@2.7.1 + antd@3.25.2 项目运行 ``` cd react (进入项目) npm install (安装依赖包) npm start ...
前端选型（VUE+Webpack+Less）
07-17
前端选型文档主要针对之前的开发模式JQ+css+SVN 跟VUE+webpack+less+git的一个对比
framework7-App:Framework7 + webpack + Less + Template7
05-17
#npm安装 #npm运行开发 #npm运行构建 设置代理proxy：{“ / api”：“ ”} module.exports = {dev：{主机：'localhost'，端口：8080，代理服务器：{“ / api”：“ ”}}} index.js-> router.js-> views，viewsJs ...
webpack配置less
aa331916334的博客
01-08 292
webpack4.0把webpack.config.js隐藏起来了，需要先暴露出来，在webpack修改配置 转载于:https://www.cnblogs.com/smdb/p/10240451.html
webpack中less配置与编译
Beq
08-23 7781
首先通过npm安装less和less-loader npm install less --save-dev npm install less-loader --save-dev 然后在webpack中配置less-loader： modules:{    rules:[ {    test:/\.vue$/, loader:'vue-loader', options:{    lo...
webpack配置（第五步：less/css篇（基础篇））
weixin_33816611的博客
03-22 1340
2019独角兽企业重金招聘Python工程师标准>>> ...
Webpack安装(2)-打包css、scss、less(包括编译、分离)
lhtzbj12的专栏
01-28 8256
此文接着《Webpack安装(1)-集成Babel》 完整代码详见：https://github.com/lhtzbj12/webpack-demo 1、打包css文件，先使用下面的命令安装css-loader和style-loader cnpm install --save-dev css-loader style-loader 2、需要打包scss，则需要安装node-sass和sa
webpack配置全局变量less文件
qq1498982270的博客
07-22 6979
配置全局less 第一步：安装 style-resources-loader npm i style-resources-loader 第二步：配置webpack.config.dev.js { test: /\.less$/, use: [ 'style-loader', { loader: 'css-loade...
webpack如何解析less?(less-loader、css-loader、style-loade)
scorpio的世界
06-04 8787
主要通过less-loader、css-loader、style-loader插件作用 less-loader：用于加载.less文件，将less转化为css css-loader：用于加载.css文件，将css转化为commonjs style-loader: 将样式通过<style>标签插入到head中 先安装这几款插件 npm i style-loader css-l...
webpack+ES6+less开发环境搭建（附带视频教程）
热门推荐
大灰狼的小绵羊哥哥的博客
09-04 1万+
webpack是什么https://cnodejs.org/topic/571f4e785a26c4a841ecbd7c Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。 百度网盘视频下载：http://pan.baidu.com/s/1jIPJucu百度网盘在线观看：http://pan.baidu.com/sha
react+webpack+antd框架自定义使用阿里iconfont图标。
05-19
步骤如下： 1. 在阿里iconfont官网上选择所需图标，添加到购物车中，并下载对应的图标字体文件。 2. 将字体文件复制到项目中的一个合适的目录下，比如 `src/assets/fonts`。 3. 在项目中安装 `@iconify/react` 和 `@iconify/icons` 包，用于渲染图标。 ``` npm install @iconify/react @iconify/icons --save ``` 4. 在 `webpack.config.js` 文件中配置字体文件的加载器，以及 `less-loader` 和 `css-loader` 的配置。 ``` const IconfontWebpackPlugin = require('iconfont-webpack-plugin'); module.exports = { module: { rules: [ { test: /\.(woff|woff2|eot|ttf|otf)$/, use: [ { loader: 'file-loader', options: { outputPath: 'fonts' } } ] }, { test: /\.less$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'less-loader', options: { lessOptions: { modifyVars: { 'hack': `true;@import "${require.resolve('antd/lib/style/color/colorPalette.less')}";`, 'icon-font-path': '"../assets/fonts/iconfont"' } } } } ] } ] }, plugins: [ new IconfontWebpackPlugin({ resolve: { extensions: ['.tsx'] } }) ] }; ``` 其中，`IconfontWebpackPlugin` 是用于自动将 `@iconify/icons` 中的图标转换成 React 组件，并导出到指定目录的插件。 5. 在代码中使用图标： ``` import { Icon } from '@iconify/react'; import userIcon from '@iconify/icons-ant-design/user'; const MyComponent = () => { return ( <div> <Icon icon={userIcon} /> </div> ); }; ``` 其中，`userIcon` 是从 `@iconify/icons-ant-design` 包中导入的，可以替换成其他需要使用的图标。`Icon` 组件会自动根据图标名称找到对应的字体文件，并渲染出图标。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值