Содержание
# CSS Extraction
Only apply CSS extraction for production so that you get CSS hot reload during development.
# webpack 4
npm install -D mini-css-extract-plugin // webpack.config.js var MiniCssExtractPlugin = require('mini-css-extract-plugin') module.exports = // other options. module: rules: [ // . other rules omitted test: /\.css$/, use: [ process.env.NODE_ENV !== 'production' ? 'vue-style-loader' : MiniCssExtractPlugin.loader, 'css-loader' ] > ] >, plugins: [ // . Vue Loader plugin omitted new MiniCssExtractPlugin( filename: 'style.css' >) ] > # webpack 3
npm install -D extract-text-webpack-plugin // webpack.config.js var ExtractTextPlugin = require("extract-text-webpack-plugin") module.exports = // other options. module: rules: [ // . other rules omitted test: /\.css$/, loader: ExtractTextPlugin.extract( use: 'css-loader', fallback: 'vue-style-loader' >) > ] >, plugins: [ // . Vue Loader plugin omitted new ExtractTextPlugin("style.css") ] > # Извлечение CSS в отдельный файл
Применяйте извлечение CSS в отдельный файл только в production, чтобы использовать горячую перезагрузку CSS на этапе разработки.
# webpack 4
npm install -D mini-css-extract-plugin // webpack.config.js var MiniCssExtractPlugin = require('mini-css-extract-plugin') module.exports = // другие настройки. module: rules: [ // . другие правила опущены test: /\.css$/, use: [ process.env.NODE_ENV !== 'production' ? 'vue-style-loader' : MiniCssExtractPlugin.loader, 'css-loader' ] > ] >, plugins: [ // . плагин Vue Loader опущен new MiniCssExtractPlugin( filename: 'style.css' >) ] > # webpack 3
npm install -D extract-text-webpack-plugin // webpack.config.js var ExtractTextPlugin = require("extract-text-webpack-plugin") module.exports = // другие настройки. module: rules: [ // . другие правила опущены test: /\.css$/, loader: ExtractTextPlugin.extract( use: 'css-loader', fallback: 'vue-style-loader' >) > ] >, plugins: [ // . плагин Vue Loader опущен new ExtractTextPlugin("style.css") ] >