Webpack：打包css、scss、font等样式文件（4）

最新推荐文章于 2024-03-18 20:54:18 发布

黑卡米

最新推荐文章于 2024-03-18 20:54:18 发布

阅读量399

点赞数

分类专栏： Webpack 文章标签： webpack

本文链接：https://blog.csdn.net/Aaren_Jiang/article/details/108859205

版权

Webpack 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文假设你已阅读前章节的内容。

安装打包文件

//将css文件挂载到html的head的style里
npm install style-loader --save-dev

//分析css文件，将多个文件合并
npm install --save-dev css-loader

//将sass文件编译成css
npm install sass-loader node-sass --save-dev

//增加厂商前缀，如：-webkit-transform
npm i -D postcss-loader
//和postcss-loader配合使用，自动添加厂商前缀。最新版本有兼容问题，故使用9.8.6版本
npm install autoprefixer@9.8.6 -D

webpack.config.js

const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            name: '[name].[ext]',
                            limit: 1146700
                        }
                    }
                ]
            },
            {
                //对scss、css文件进行打包
                test: /\.(scss|css)$/,
                //从下到上，从右到左的顺序来编译文件
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true, //启用局部作用域 CSS
                            importLoaders: 1 // 0 => 无 loader(默认); 1 => postcss-loader; 2 => postcss-loader, sass-loader
                        }
                    },
                    'sass-loader',
                    'postcss-loader']
            },
            {
                //打包字体文件
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    },
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    }
};

样式局部引用

import monkeyImg from './monkey.jpg'
//为了不让index.css影响createMoneky里的js，导出为styles。若直接引用将为全局使用
import styles from './index.scss' 
import createMoneky from './createMoneky'

createMoneky()

var img = new Image()
img.src = monkeyImg
//用以下方式添加样式
img.classList.add(styles.monkeyImg)

var dom = document.getElementById('root')
dom.append(img)