npm install extract-text-webpack-plugin --save-dev
1. 簡單的方法
// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
// other options...
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
extractCSS: true
}
}
]
},
plugins: [
new ExtractTextPlugin("style.css")
]
}
2. 手動配置
// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
// other options...
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
css: ExtractTextPlugin.extract({
use: 'css-loader',
fallback: 'vue-style-loader' // <- 這是vue-loader的依賴，所以如果使用npm3恼除，則不需要顯式安裝
})
}
}
}
]
},
plugins: [
new ExtractTextPlugin("style.css")
]
}
3. 問題
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',indentedSyntax',
}踪旷，
extractCSS: true
}
}
]
在options中配置了loaders，vue-style-loader會默認(rèn)將css打包進(jìn)js中；砘浴Ａ钜啊！所以在配置提取無效
