林无语
2018-07-16 17:25
Error: Path variable [contenthash] not implemented in this context: [name].[contenthash].css
在之前版本中我们使用extract-text-webpack-plugin
来提取CSS文件,不过在webpack 4.x中则应该使用mini-css-extract-plugin
来提取CSS到单独文件中
基于webpack 3.0的Vue项目
const ExtractTextPlugin = require('extract-text-webpack-plugin') config.module.rules.push( { test:/\.styl(us)?$/, use:ExtractTextPlugin.extract({ fallback:'style-loader', use:[ 'css-loader', { loader:'postcss-loader', options:{ sourceMap:true } }, 'stylus-loader' ] }) }) config.plugins.push( new ExtractTextPlugin('styles.[hash:8].css') )
基于webpack 4.0的Vue项目
const MiniCssExtractPlugin = require('mini-css-extract-plugin') config.module.rules.push( { test:/\.styl(us)?$/, use:[ 'style-loader', MiniCssExtractPlugin.loader, 'css-loader', { loader:'postcss-loader', options:{sourceMap:true} }, 'stylus-loader' ] } config.plugins.push( new MiniCssExtractPlugin( { filename: 'styles.[contenthash:8].css' } ) )
我把contenthash改成了hash就编译通过了
util.js
删掉 ExtractTextPlugin,改用 MiniCssExtractPlugin
```
if (options.extract) {
let extractLoader = {
loader: MiniCssExtractPlugin.loader,
options: {}
}
return [extractLoader, 'css-loader'].concat(['postcss-loader'], loaders)
} else {
return ['vue-style-loader', 'css-loader'].concat(['postcss-loader'], loaders)
}
```
Vue+Webpack打造todo应用
84606 学习 · 787 问题
相似问题