小白学 Webpack之打包 CSS,Less,SCSS 等样式

安装处理器

css-loader

npm install --save-dev css-loader

style-loader

npm install --save-dev style-loader

less-loader

npm install --save-dev less-loader

sass-loader

npm install --save-dev sass-loader

scss-loader

npm install --save-dev scss-loader

如果你的本地开发环境没有安装less,scss,sass,那么还需要安装下

npm install --save-dev less scss sass

配置 webpack.config.js

var path=require('path');

//插件
var HtmlWebpackPlugin=require('html-webpack-plugin')

module.exports={
  //入口文件
  entry:'./src/index.js',
  output:{
    //文件名
    filename:'js/main.js',
    path:path.resolve(__dirname,'./dist/')
  },
  plugins: [
    new HtmlWebpackPlugin({
      //title: 'My App',
      filename: 'index.html',
      template:"./src/index.html"
    })
  ],
  devtool: "source-map",//地图
  mode:"development",
  module: {
    rules: [
      {
        test:/\.css$/,//正则打包什么文件
        //先进后出,也就是先处理css-loader再进行style-loader
        use:[
          'style-loader','css-loader'
        ]
      }
    ]
  }
}

文件布置

|-- src
|   |-- css
|   |   |-- base.css
|   |   `-- color.css
|   |-- index.html
|   |-- index.js
|   `-- module.js
`-- webpack.config.js

base.css

/*base.css*/
@import "color.css";
*{
    margin: 0;
    padding: 0;
}
body{
    background: #f5f5f5;
    font-size: 14px;
}

color.css

h1{
    color: crimson;
}
h2{
    color: brown;
}

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>黑白课堂</title>
</head>
<body>
<h1>黑白课堂 webpack 课程</h1>
<h2>wepback 打包工具学习</h2>
</body>
</html>

index.js 映入样式

require('./css/base.css');
var info=require('./module');
console.log(info)

打包演示

webpack

描述
描述

打包less操作

增加多一个less文件
less/style.less

h1{
    font-size: 20px;
    line-height: 50px;
    span{
        font-size: 14px;
    }
}

引入下
index.js

require('./css/base.css');
require('./less/style.less');
var info=require('./module');
console.log(info)

配置下规则

var path=require('path');

//插件
var HtmlWebpackPlugin=require('html-webpack-plugin')

module.exports={
  //入口文件
  entry:'./src/index.js',
  output:{
    //文件名
    filename:'js/main.js',
    path:path.resolve(__dirname,'./dist/')
  },
  plugins: [
    new HtmlWebpackPlugin({
      //title: 'My App',
      filename: 'index.html',
      template:"./src/index.html"
    })
  ],
  devtool: "source-map",//地图
  mode:"development",
  module: {
    rules: [
      {
        test:/\.css$/,//正则打包什么文件
        //先进后出,也就是先处理css-loader再进行style-loader
        use:[
          'style-loader','css-loader'
        ]
      },
      {
        test:/\.less$/,
        use:[
          'style-loader','css-loader','less-loader'
        ]
      },
      {
        test:/\.scss/,
        use:[
          'style-loader','css-loader','scss-loader'
        ]
      }
    ]
  }
}

描述

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。