vue服务端渲染,提取css单独打包的好处就不说了,在这里主要说的是抽取css的方法
要从 *.vue
文件中提取 CSS,可以使用 vue-loader
的 extractCSS
选项(需要 vue-loader
12.0.0+)
// webpack.config.js const ExtractTextPlugin = require(‘extract-text-webpack-plugin‘) // CSS 提取应该只用于生产环境 // 这样我们在开发过程中仍然可以热重载 const isProduction = process.env.NODE_ENV === ‘production‘ module.exports = { // ... module: { rules: [ { test: /\.vue$/, loader: ‘vue-loader‘, options: { // enable CSS extraction extractCSS: isProduction } }, // ... ] }, plugins: isProduction // 确保添加了此插件! ? [new ExtractTextPlugin({ filename: ‘common.[chunkhash].css‘ })] : [] }
请注意,上述配置仅适用于 *.vue
文件中的样式,然而你也可以使用 <style src="./foo.css">
将外部 CSS 导入 Vue 组件。
如果你想从 JavaScript 中导入 CSS,例如,import ‘foo.css‘
,你需要配置合适的 loader:
module.exports = { // ... module: { rules: [ { test: /\.css$/, // 重要:使用 vue-style-loader 替代 style-loader use: isProduction ? ExtractTextPlugin.extract({ use: ‘css-loader‘, fallback: ‘vue-style-loader‘ }) : [‘vue-style-loader‘, ‘css-loader‘] } ] }, // ... }
原文地址:https://www.cnblogs.com/wing-sky/p/9642271.html
时间: 2024-10-18 16:40:13