基础环境搭建
通过 require 导入的样式是无法被识别的, 需要加载器:
接着基础工程添加样式处理:
1, 安装样式插件
yarn add Less-loader CSS-loader style-loader -D
2,src 文件夹创建 a.CSS,b.CSS,c.Less
2-1 index.JS 导入 a.CSS,c.Less
- require('./a.css');
- require('./c.less');
- 2-2,a.CSS
- @import 'b.css';
- body {
- background-color: #ddaadd;
- }
- 2-3,b.CSS
- body {
- font-size: 22px;
- }
- 2-4,c.Less
- @appBorder: 1px solid yellow;
- body {
- #App {
- border: @appBorder;
- }
- }
3,webpack.config.JS 添加样式处理规则
- // 模块处理
- module: {
- // loader
- rules: [
- {
- test: /\.CSS$/, // 匹配 CSS 文件
- // CSS-loader 处理 CSS 文件 @import 嵌套
- // style-loader 把 CSS 插入 header
- // 多个 loader 需要数组, 单个可写成字符串
- // loader 顺序: 从右向左执行, 从下到上, 单个 loader 可添加更多配置, 使用对象形式
- // use: [{loader: 'style-loader', options: ...}, 'css-loader']
- use: [{
- loader: 'style-loader',
- options: {
- // 样式插入到顶部
- insertAt: 'top'
- }
- }, 'css-loader']
- },
- {
- test: /\.Less$/, // 匹配 Less 文件
- // CSS-loader 处理 CSS 文件 @import 嵌套
- // style-loader 把 CSS 插入 header
- // 多个 loader 需要数组, 单个可写成字符串
- // loader 顺序: 从右向左执行, 从下到上, 单个 loader 可添加更多配置, 使用对象形式
- // use: [{loader: 'style-loader', options: ...}, 'css-loader']
- use: [{
- loader: 'style-loader',
- options: {
- // 样式插入到顶部
- insertAt: 'top'
- }
- }, 'css-loader', 'less-loader']
- }
- ]
- }
webpack.config.JS 完整配置:
- // webpack 是 node 写出来的, 需要 node 的写法
- let path = require('path');
- // path.resolve 相对路径转成绝对路径
- // console.log(path.resolve('dist'));
- // 以当前目录
- // console.log(__dirname);
- // html-webpack-plugins 插件
- let HtmlWebpackPlugins = require('html-webpack-plugin');
- // webpack 相关配置
- module.exports = {
- // 开发服务的配置
- devServer: {
- // 端口, 默认 8080
- port: '8099',
- // 进度条
- progress: true,
- // 启动后访问目录, 默认是项目根目录, 这个设置到打包后目录
- contentBase: './build',
- // 启动压缩
- compress: true
- },
- // 模式, 2 种: 生产模式 (production) 和开发模式(development)
- // 开发模式不压缩打包后代码, 生产模式压缩打包后代码
- mode: 'development',
- // 入口, 表示从哪里开始打包
- entry: './src/index.js',
- // 表示出口(输出后文件相关配置)
- output: {
- // 打包后的文件名, 产生哈希
- //filename: 'bundle.[hash].js',
- // 哈希 8 位
- filename: 'bundle.[hash:8].js',
- // 输出后的路径(必须是一个绝对路径)
- path: path.resolve(__dirname, 'dist')
- },
- // 插件配置
- plugins: [
- new HtmlWebpackPlugins({
- // 模板位置
- template: 'index.html',
- // 文件名
- filename: 'index.html',
- // 生产开启, 压缩代码
- minify: {
- // 删除 HTML 双引号
- removeAttributeQuotes: true,
- // 压缩成一行
- collapseWhitespace: true
- },
- // 文件哈希
- hash: true
- })
- ],
- // 模块处理
- module: {
- // loader
- rules: [
- {
- test: /\.CSS$/, // 匹配 CSS 文件
- // CSS-loader 处理 CSS 文件 @import 嵌套
- // style-loader 把 CSS 插入 header
- // 多个 loader 需要数组, 单个可写成字符串
- // loader 顺序: 从右向左执行, 从下到上, 单个 loader 可添加更多配置, 使用对象形式
- // use: [{loader: 'style-loader', options: ...}, 'css-loader']
- use: [{
- loader: 'style-loader',
- options: {
- // 样式插入到顶部
- insertAt: 'top'
- }
- }, 'css-loader']
- },
- {
- test: /\.Less$/, // 匹配 Less 文件
- // CSS-loader 处理 CSS 文件 @import 嵌套
- // style-loader 把 CSS 插入 header
- // 多个 loader 需要数组, 单个可写成字符串
- // loader 顺序: 从右向左执行, 从下到上, 单个 loader 可添加更多配置, 使用对象形式
- // use: [{loader: 'style-loader', options: ...}, 'css-loader']
- use: [{
- loader: 'style-loader',
- options: {
- // 样式插入到顶部
- insertAt: 'top'
- }
- }, 'css-loader', 'less-loader']
- }
- ]
- }
- }
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>
- index
- </title>
- </head>
- <body>
- <div id="app">
- App Info
- </div>
- </body>
- </HTML>
来源: http://www.jianshu.com/p/3490d80f661d