webpack打包原理入门探究（六）less|sass-loader初探

原创

mb5fe55c8710ded 2020-12-26 21:12:46 ©著作权

文章标签 java 文章分类 Webpack 前端开发

©著作权归作者所有：来自51CTO博客作者mb5fe55c8710ded的原创作品，请联系作者获取转载授权，否则将追究法律责任

来了老弟，昨天学习到不知道几点了，一旦沉迷于学习无法自拔啊，接着昨天的事情开始

webpack打包原理入门探究（五）css-loader初探

webpack打包原理入门探究（五）loader初探（二）

webpack打包原理入门探究（五）loader初探（一）

webpack打包原理入门探究（四）插件探究（下）

webpack打包原理入门探究（四）插件探究（上）

webpack打包原理入门探究（三）入口探究

webpack打包原理入门探究（二）基本配置

webpack打包原理入门探究（一）

今天来学习一下 webpack 如何处理 less 样式

你需要安装一下 less,less-loader

npm install less less-loader --save-dev

webpack打包原理入门探究（六）less|sass-loader初探_java

我们在 styles/less/common.less

html,body {
    height: 100px;
    width: 100px;
    .layer {
        background: red;
    }
}

在 src/app.js 引入 src/styles/less/common.less

import './styles/css/common.css'
import './components/layer/layer.scss'
import './styles/less/common.less'
import layer from './components/layer/layer.js'

const App = () => {
    console.log("layer==>", layer)
}

new App()

配置一下 webpack.app.config.js

let path = require('path')
let htmlWebpackPlugin = require('html-webpack-plugin')
function resolve(o) {
    return path.resolve(__dirname, o)
}
module.exports = {
    entry: resolve('src/app.js'), // 指定入口文件
    output: {
        path: resolve('dist'),
        // filename: '[name]-[hash].js'
        filename: "js/[name].bundle.js",
        // publicPath: ''
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: resolve('node_modules'), //指定排除的范围,
                include: resolve('src')
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader!postcss-loader'
            },
            {
                test: /\.scss$/,
                loader: 'style-loader!css-loader!postcss-loader!sass-loader'
            },
            {
                test: /\.less$/,
                loader: 'style-loader!css-loader!postcss-loader!less-loader'
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            // filename: "index-[hash].html",
            // filename: 'index-[chunkhash].html',
            filename: "index.html", // 生成 dist/a.html
            template: 'index.html', // 指定根目录下的 index.html
            inject: 'body',
        })
    ]
}