webpack对样式的处理

最新推荐文章于 2024-09-20 12:27:56 发布

原创最新推荐文章于 2024-09-20 12:27:56 发布 · 897 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#postcss #autoprefixer #webpack

大前端-配置项专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何在Webpack中正确加载CSS文件，并利用style-loader、css-loader进行配置。此外，还介绍了如何使用PostCSS自动添加浏览器前缀，确保CSS兼容性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在webpack中我们一般是通过

import './main.css'

引入开发环境下的css文件，但是通过这种方法引入的css会报错，需要安装style-loader和css-loader来处理这种方式下引入的css文件

npm 安装

npm  install  style-loader css-loader --save-dev

然后再webpack_config.js配置

    module: {  
        loaders: [  
            {  
                test: /\.css$/,  
                use: ['style-loader','css-loader']  
            }  
        ]  
    }

划重点，新版的style-loader和css-loader配置需要写成上面的方式。

使用
./dist/index.html

    <div class="config">
        config
    </div>

    <script src="./main.js"></script>

./src/main.css

.config{
    color:red;
}

./src/main.js

import './main.css'

实际效果
css

处理css前缀

我们使用PostCSS来为CSS代码自动添加适应不同浏览器的CSS前缀

npm install --save-dev postcss-loader autoprefixer

接下来配置
webpack.config.js

        loaders: [  
            {  
                test: /\.css$/,  
                use: ['style-loader','css-loader','postcss-loader']  
            }
        ]

新建postcss.config.js文件

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

执行npm start打包后：

.config{
    color:red;
    background-size:cover;
    display: flex;
}

处理后效果