webpack4配置之——06：配置样式-css、postcss、scss、less

最新推荐文章于 2023-06-09 15:35:19 发布
最新推荐文章于 2023-06-09 15:35:19 发布
阅读量3.5k 收藏 7
点赞数 2
分类专栏： webpack4.x详细配置步骤 文章标签： webpack4.x postcss scss
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kai_vin/article/details/88700136
版权

如果你喜欢这系列的文章，欢迎star我的项目，源码地址，点击这里

编译 CSS 文件

处理 css 的相关技术有 postcss、 scss、less，接下来，会一一介绍

.css 文件的编译

编译 .css 文件，需要用到 css-loader 和 style-loader

css-loader 使你能够使用类似 @import 和 url(...) 的方法实现 require() 的功能；

style-loader 将所有的计算后的样式加入页面中； 二者组合在一起使你能够把样式表嵌入 webpack 打包后的JS文件中。

安装相关插件

npm install css-loader style-loader -D

修改在 webpack.dev.conf.js 文件，新增 module 配置，添加如下代码：

// 加载器 loader 配置项
module:{
    rules:[
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }
    ]
},

开始测试效果，在 src 文件夹下 新建 css/reset.css 文件，并添加如下代码：

body{
    margin:0;
    padding:0;
    color:red;
}

在入口文件 src/index.js 顶部引入该样式文件

import './css/reset.css';

执行命令 npm start 查看效果，文字已经变成红色了~ 配置成功

使用 postcss 插件

对于 CSS3 的许多特性来说，需要添加各种浏览器兼容前缀，开发过程中，这样加太麻烦，postcss 帮你自动添加各种浏览器前缀

安装相关插件

npm install postcss-loader autoprefixer -D

首先需要在根目录创建 postcss.config.js 文件，添加如下内容

module.exports = {
    plugins: [
      require('autoprefixer')
    ]
}

修改 webpack.dev.conf.js 文件的 module 配置如下：

// 加载器 loader 配置项
module:{
    rules:[
        {
            test: /\.css$/,
            use: [{
                    loader: 'style-loader'
                },{
                    loader: 'css-loader'
                },{
                    loader: 'postcss-loader',
                    options: {
                        sourceMap: true,
                        config: {
                            path: 'postcss.config.js'
                        }
                    }
                }
            ]
        }
    ]
},

修改package.json 文件，添加如下代码：

"browserslist": [
    "defaults",
    "not ie < 11",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ]

在package.json 文件中添加要兼容哪些浏览器版本，我们这里只用 postcss 的给代码添加浏览器前缀功能， autoprefixer ，测试一下效果如何

在 src/index.html 的 body 中，添加如下代码：

<div id="postcss"></div>

在 src/index.js 中，添加如下代码：

document.getElementById('postcss').innerHTML = "<h1>我自动添加了浏览器前缀</h1>";

在 src/css/reset.css 中，添加如下代码：

#postcss{
    border-radius: 5px;
    box-shadow: 10px 10px 10px rgba(0,0,0,.3);
    width:500px;
    height:600px;
    border:1px solid red;
}

然后执行命令 npm start 浏览器打开开发者工具，找到我们添加的代码啊，查看 css 样式，会发现，已经自动帮我们添加了浏览器前缀~

使用 scss 预处理 css

scss 的好用之处，这里不做赘述，先安装插件，这里使用 node-sass，安装 node-sass 往往是最容易出错的，首先需要电脑安装 python 软件，然后必须先全局安装 node-gyp 然后才能全局安装 node-sass，而安装 node-sass 如果不FQ的话，只能用 cnpm 进行安装，全局安装完 node-sass，再在项目中安装一遍就可以了。

node-sass让人头痛的问题终于找到了一个比较好的解决办法，那就是为node-sass单独设置一下镜像源，可以在命令行中输入以下命令：

npm config set sass-binary-site http://npm.taobao.org/mirrors/node-sass -g

然后再安装相关插件：

npm install node-gyp node-sass -g
npm install postcss-scss sass-loader node-sass -D

使用 vscode 编辑器，要让其支持 scss 语法，需要在 文件-首选项-设置 中添加以下代码

"files.associations": {
    "*.css": "scss"
},

修改 postcss.config.js

module.exports = {
    parser: 'postcss-scss',
    plugins: [
      require('autoprefixer')
    ]
}

然后修改 webpack.dev.conf.js 文件，添加 sass-loader

{
    test: /\.scss$/,
    use: [
        {
            loader: 'style-loader', 
        },
        {
            loader: 'css-loader', 
        },
        {
            loader: 'postcss-loader',
            options: {
                sourceMap: true,
                config: {
                    path: 'postcss.config.js'
                }
            }
        },
        {
            loader: 'sass-loader', 
            options: { sourceMap: true }
        }
    ],
    exclude: /node_modules/
},

接下来，先测试效果

在 src 文件夹下，新建 scss/public.scss 文件 添加如下代码：

$primary:               #f5f5f5 !default;//主色

#postcss{
    background: $primary;
    h1{
        width:100%;
        height:36px;
        line-height: 36px;
        color: darken($primary,30%);
    }
}

然后在 src/index.js 中，引入该样式文件

import './scss/public.scss';

执行命令 npm start 查看效果，一切显示正常，新增的 scss 相关样式也都显示正常~

使用 less 预处理 css

安装相关插件

npm install less less-loader -D

修改 webpack.dev.conf.js 文件，添加 less-loader

{
    test: /\.less$/,
    use: [
        {
            loader: 'style-loader', 
        },
        {
            loader: 'css-loader', 
            options: {
                importLoaders: 1,
            }
        },
        {
            loader: 'postcss-loader',
            options: {
                sourceMap: true,
                config: {
                    path: 'postcss.config.js'
                }
            }
        },
        {
            loader: 'less-loader', 
            options: { 
                sourceMap: true,
            }
        }
    ]
},

在 src 文件夹下，新建 less/index.less 文件 添加如下代码：

@green: #8bab34;

#app{
    margin:20px;
    width:600px;
    height:30px;
    border:1px solid @green;
}

然后在 src/index.js 中，引入该样式文件

import './less/index.less';

执行命令 npm start 查看效果，一切显示正常，新增的 less 相关样式也都显示正常~

less 和 scss，使用其一即可，这里因为后期会说到 antd ，而本人又更倾向于使用 scss ，所以两者都加上了，都会用得到

antd 是使用 less 作为样式预处理的一个 UI 库，引用它的 ui 组件，需要处理它的 less 样式，所以这里也加入了 less-loader

相关文件配置信息更新情况

以下为本文已涉及到的配置文件的当前详细信息
  1. webpack.dev.conf.js 文件现在的配置信息情况：
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const open = require('opn');//打开浏览器
const chalk = require('chalk');// 改变命令行中输出日志颜色插件
const ip = require('ip').address();

module.exports = {
    // 入口文件配置项
    entry: path.resolve(__dirname, 'src/index.js'),
    // 输出文件配置项
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/bundle.js',
        publicPath: ""
    },
    // webpack4.x 环境配置项
    mode:"development",
    // 加载器 loader 配置项
    module:{
        rules:[
            {
                test: /\.css$/,
                use: [{
                        loader: 'style-loader'
                    },{
                        loader: 'css-loader'
                    },{
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true,
                            config: {
                                path: 'postcss.config.js'
                            }
                        }
                    }
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: 'style-loader', 
                    },
                    {
                        loader: 'css-loader', 
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true,
                            config: {
                                path: 'postcss.config.js'
                            }
                        }
                    },
                    {
                        loader: 'sass-loader', 
                        options: { sourceMap: true }
                    }
                ],
                exclude: /node_modules/
            },
            {
                test: /\.less$/,
                use: [
                    {
                        loader: 'style-loader', 
                    },
                    {
                        loader: 'css-loader', 
                        options: {
                            importLoaders: 1,
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true,
                            config: {
                                path: 'postcss.config.js'
                            }
                        }
                    },
                    {
                        loader: 'less-loader', 
                        options: { 
                            sourceMap: true,
                        }
                    }
                ]
            },
        ]
    },
    // 插件配置项
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',//输出文件的名称
            template: path.resolve(__dirname, 'src/index.html'),//模板文件的路径
            title:'webpack-主页',//配置生成页面的标题
        }),
    ],
    // 开发服务配置项
    devServer: {
        port: 8080,
        contentBase: path.resolve(__dirname, 'dist'),
        historyApiFallback: true,
        host: ip,
        overlay:true,
        after(){
            open(`http://${ip}:${this.port}`)
            .then(() => {
                console.log(chalk.cyan(`http://${ip}:${this.port} 已成功打开`));
            })
            .catch(err => {
                console.log(chalk.red(err));
            });
        }
    }
}
  1. postcss.config.js 文件现在的配置信息情况：
module.exports = {
    parser: 'postcss-scss',
    plugins: [
      require('autoprefixer')
    ]
}
IQkevin
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
六：配置样式-css、postcss、scss、less
qq_24892029的博客
09-16 489
编译 CSS 文件 处理 css 的相关技术有 postcss、 scss、less，接下来，会一一介绍 1：.css 文件的编译 编译 .css 文件，需要用到 css-loader 和 style-loader: css-loader 使你能够使用类似 @import 和 url(...) 的方法实现 require() 的功能； style-loader 将所有的计算后的样式加入页面中； 二者组合在一起使你能够把样式表嵌入 webpack 打包后的JS文件中。 （1）：安装相关插件 npm i
探索PostCSS SCSS：让CSS预处理器更上一层楼
最新发布
gitblog_00068的博客
04-14 479
探索PostCSS SCSS：让CSS预处理器更上一层楼 项目地址:https://gitcode.com/postcss/postcss-scss 项目简介 PostCSS SCSS 是一个基于 PostCSS 的插件，它允许你在你的工作流中解析和构建SCSS（Sassy CSS）语法。这个项目的核心目标是为开发者提供一个强大而灵活的工具，以便他们可以利用SCSS的强大功能，同时保持PostCS...
webpack4.0 基础配置3(css)
义勇
04-12 218
1. 安装常见css预处理器的loader npm install css-loader style-loader less less-loader autoprefixer postcss-loader --save-dev 注意： 1）autoprefixer postcss-loader 为兼容配置 2) 配置sacc的话：sass node-sass sass-loader // 配置webpack加载器(loader) module: { // 设置规则和处理方案 默
webpack4.0核心概念（四）———— 前端开发工程环境搭建01 postcss
qq_37899792的博客
09-22 339
需要考虑的问题 项目是pc端还是移动端 移动端往往都是spa, pc端往往都是mpa 兼容的浏览器和版本 项目是多人（前端）参与还是单人 代码规范 项目使用的技术栈 框架 —— vue react 样式处理 —— less、 sass ts —— babel es6+ 模板引擎 —— ejs、 pug 是否支持第三方字体（字体图标）涉及侵权 工具类 安装依赖包 切换国内源 npm config .npmrc可以配置国内源 esli...
webpack4中sass的使用
huhuhuja
11-25 517
1:安装 npminstallsass-loadernode-sass--save-dev 2:配置中加入 sass 重新编译就可以 { test: /\.s[ac]ss$/i, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader', ], },
postcss-scss:PostCSS的SCSS解析器
05-07
PostCSS SCSS语法 用于的解析器。 该模块不编译SCSS。 它只是将mixin解析为自定义规则，并将变量作为属性进行解析，以便PostCSS插件随后可以将SCSS源代码与CSS一起转换。 安装 npm --save install postcss-scss 或（如果您使用 ） yarn add --dev postcss-scss 用法 有两种使用此解析器的方法： 1. SCSS转换 该插件的主要用例是将PostCSS转换直接应用于SCSS源代码。 例如，您可以使用SCSS源进行，而将自动修复源中的问题。 // postcss.config.js module . exports = { syntax : 'postcss-scss' , plugins : { … } } 2. PostCSS的内联注释 您也可以使用此解析器仅向PostCSS项
webpack-typings-for-css:Webpack加载器，为CSS模块生成TypeScript类型
03-29
CSS加载器的Webpack键入 Webpack加载器，为CSS模块生成TypeScript类型安装npm install webpack-typings-for-css --save-devwebpack.config.js module . exports = { module : { rules : [ { test : / \. css $ / , ...
antd-scss-theme-plugin:一个Webpack插件，用于通过SCSS主题文件自定义Ant Design，并在整个项目中使用Ant Design在SCSS文件中的已编译变量
05-17
将Ant Design配置为使用更少的样式表-有关将antd配置为使用Less而不是预先编译CSS的说明。 第2步。在Webpack设置中使用antd-scss-theme-plugin plugin-启用此插件的说明。 用法 自定义Ant Design的主题-如何在SCSS...
Jest-CSS-Modules：一个防止CSS模块解析错误的Jest脚本处理器
02-06
注意：从v2.0.0开始，该库仅实现了 。 提供了有关使用identity-obj-proxy直接解决此问题的更多详细信息，我建议您使用该库而... " \\ .(css|less|scss|sss|styl)$ " : " <rootDir>/node_modules/jest-css-modules " }
dev-webpack：Webpack配置
02-05
2，编译LESS，SCSS，Stylus，es6 3，打包自动追加文件版本号（哈希） 4，html自定义模板 5，抽离，压缩CSS 6，压缩，提取JS 7，url-loader处理图片为base64，使用时图片必须是相对路径否则无效（一般不用） 8，...
lit-scss-loader:一个Webpack加载器，只需导入CSSSCSS文件，即可自动生成LitElement所需JavaScript样式
05-13
安装： npm i -D lit-scss-loader extract-loader要求LitElement Webpack 4（“提取程序加载器”，“ css加载程序”，“ sass加载程序”）工作原理： 将其包括在您的Webpack Config中。 在“最后一个”或所有装载...
详解webpack之scss和postcss-loader的配置
08-28
本篇文章主要介绍了详解webpack之scss和postcss-loader的配置，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
webpack---配置Sass、Less、PostCSS及加载样式文件的多种方式
WRian_Ban的小晴天
10-15 913
在搭建初步的webpack脚手架中对webpack的配置有了初步的学习，接下来针对样式文件的抽离进一步进行学习。 1、准备工作 安装Sass和Less及其加载器 Less、Sass 扩展了原生的CSS 语言。 Less 是一门 CSS 预处理语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。 Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (va...
webpack入门学习2（打包css、less、scss，使用postcss处理浏览器前缀）
weixin_42292991的博客
10-04 380
如何打包css？ 先在public文件夹下创建index.css文件，然后在index.js文件里引入 此时输入 npm run dev打包就会报错：说模块解析失败 因此需要引入能够解析css的模块解析器：loader 什么是loader loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，...
css转换成scss,postcss-less2scss：将 Less 转换成 Scss 的 PostCSS 插件
weixin_39850331的博客
08-03 609
发布一个 PostCSS 插件：postcss-less2scss，可以将 Less 文件转换为 Scss。* GitHub：https://www.npmjs.com/package/postcss-less2scss* NPM：https://www.npmjs.com/package/postcss-less2scss转换变量转换变量的定义和使用不属于任何一个 Rule 的变量Less:@l...
PostCSS插件以及其作用
dongshuaiqi的博客
06-09 1762
postCSS 一些插件以及作用
如何简单且优雅的使用 PostCSS -> CSS 补前缀功能
kalenE992的博客
03-19 757
这里写自定义目录标题1、安装 `package.json`2、安装工具 `PostCSS` 、`autoprefixer` 1、安装 package.json 先安装 package.json记录安装所用的插件，以便在其他电脑也能快速搭建对应环境。 npm init 根据对应的提示填写内容后，得到一个 package.json 文件。 注意： package.json 文件的 name 不能...
PostCSS入门：Sass用户入门指南
LuviaWu的博客
09-06 2189
这篇教程为Sass用户提供了(我认为是)一个优秀的基本配置，让你能够容易地尝试PostCSS并在以后去深入细节
vuecli 5，vue2项目使用 webpack 工具对 scss less 样式进行预处理
05-10
VueCLI 5 中，默认使用了 webpack 5 作为构建工具，可以通过配置 webpack 配置文件实现对 scss 和 less 样式的预处理。 首先需要安装对应的 loader： ```bash npm install sass-loader sass webpack --save-dev ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值