webpack打包vue提取css指南
当使用webpack打包Vue应用程序时，可以将CSS提取为单独的文件，以便实现更快的加载时间和更简洁的代码结构。以下步骤介绍了如何做到这一点：
1. 安装css-loader和style-loader
npm install css-loader style-loader --save-dev
- 配置webpack 在webpack配置中，添加以下规则：
module: {
rules: [
{
test: /.css$/,
use: ['style-loader', 'css-loader']
}
]
}
- 导入CSS
在Vue组件中，使用
import或<style>标签导入CSS文件：
import './styles.css'
或
<style>
/* CSS styles here */
</style>
- 提取CSS
要将CSS提取为单独的文件，请使用
ExtractTextWebpackPlugin插件：
const ExtractTextPlugin = require('extract-text-webpack-plugin');
然后，将其添加到webpack配置中：
plugins: [
new ExtractTextPlugin('styles.css')
]
これで、webpack将CSS提取到styles.css文件中。
文件大小：27.06KB
评论区