2019-07-18 23:32
采纳率: 0%
浏览 2.9k

VUE build的时候app css CssSyntaxError错误

vue build的时候app css CssSyntaxError错误,run dev可以正常启动


- building for production...Error processing file: static/css/app.97c058584faa589ff57590333e2787e8.css
(node:3172) UnhandledPromiseRejectionWarning: CssSyntaxError: G:\vue\recms-adminVue\static\css\app.97c058584faa589ff57590333e2787e8.css:1293:8: Unknown word
    at Input.error (G:\vue\recms-adminVue\node_modules\_postcss@7.0.17@postcss\lib\input.js:130:16)
    at Parser.unknownWord (G:\vue\recms-adminVue\node_modules\_postcss@7.0.17@postcss\lib\parser.js:563:22)
    at Parser.decl (G:\vue\recms-adminVue\node_modules\_postcss@7.0.17@postcss\lib\parser.js:235:16)
    at Parser.other (G:\vue\recms-adminVue\node_modules\_postcss@7.0.17@postcss\lib\parser.js:133:18)
    at Parser.parse (G:\vue\recms-adminVue\node_modules\_postcss@7.0.17@postcss\lib\parser.js:77:16)
    at parse (G:\vue\recms-adminVue\node_modules\_postcss@7.0.17@postcss\lib\parse.js:17:12)
    at new LazyResult (G:\vue\recms-adminVue\node_modules\_postcss@7.0.17@postcss\lib\lazy-result.js:60:16)
    at Processor.<anonymous> (G:\vue\recms-adminVue\node_modules\_postcss@7.0.17@postcss\lib\processor.js:138:12)
    at Processor.process (G:\vue\recms-adminVue\node_modules\_postcss@7.0.17@postcss\lib\processor.js:117:23)
    at Function.creator.process (G:\vue\recms-adminVue\node_modules\_postcss@7.0.17@postcss\lib\postcss.js:148:43)
    at OptimizeCssAssetsPlugin.processCss (G:\vue\recms-adminVue\node_modules\_optimize-css-assets-webpack-plugin@3.2.1@optimize-css-assets-webpack-plugin\index.js
    at Object.processor (G:\vue\recms-adminVue\node_modules\_optimize-css-assets-webpack-plugin@3.2.1@optimize-css-assets-webpack-plugin\index.js:29:23)
    at G:\vue\recms-adminVue\node_modules\_last-call-webpack-plugin@2.1.2@last-call-webpack-plugin\index.js:139:8
    at arrayEach (G:\vue\recms-adminVue\node_modules\_lodash@4.17.14@lodash\_arrayEach.js:15:9)
    at forEach (G:\vue\recms-adminVue\node_modules\_lodash@4.17.14@lodash\forEach.js:38:10)
    at LastCallWebpackPlugin.process (G:\vue\recms-adminVue\node_modules\_last-call-webpack-plugin@2.1.2@last-call-webpack-plugin\index.js:136:3)
(node:3172) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch blo
ck, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:3172) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the No
de.js process with a non-zero exit code.


const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./')

const spinner = ora('building for production...')

rm(path.join(,, err => {
  if (err) throw err
  webpack(webpackConfig, function (err, stats) {
    if (err) throw err
      colors: true,
      modules: false,
      children: false,
      chunks: false,
      chunkModules: false
    }) + '\n\n')

    if (stats.hasErrors()) {
      console.log('  Build failed with errors.\n'))

    console.log(chalk.cyan('  Build complete.\n'))
      '  Tip: built files are meant to be served over an HTTP server.\n' +
      '  Opening index.html over file:// won\'t work.\n'

const env = require('../config/prod.env')

const webpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({
      extract: true,
      usePostCSS: true
  devtool: ? : false,
  output: {
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  plugins: [
    new webpack.DefinePlugin({
      'process.env': env
    // UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking:
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      parallel: true
    // extract css into its own file
    new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css'),
      // set the following option to `true` if you want to extract CSS from
      // codesplit chunks into this main css file as well.
      // This will result in *all* of your app's CSS being loaded upfront.
      allChunks: false,
    // Compress extracted CSS. We are using this plugin so that possible
    // duplicated CSS from different components can be deduped.
    new OptimizeCSSPlugin({
      ? { safe: true, map: { inline: false } }
      : { safe: true }
    // generate dist index.html with correct asset hash for caching.
    // you can customize output by editing /index.html
    // see
    new HtmlWebpackPlugin({
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
    // keep stable when vender modules does not change
    new webpack.HashedModuleIdsPlugin(),
    // enable scope hoisting
    new webpack.optimize.ModuleConcatenationPlugin(),
    // split vendor js into its own file
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
            path.join(__dirname, '../node_modules')
          ) === 0
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      minChunks: Infinity
    // This instance extracts shared chunks from code splitted chunks and bundles them
    // in a separate chunk, similar to the vendor chunk
    // see:
    new webpack.optimize.CommonsChunkPlugin({
      name: 'app',
      async: 'vendor-async',
      children: true,
      minChunks: 3

    // copy custom static assets
    new CopyWebpackPlugin([
        from: path.resolve(__dirname, '../static'),
        ignore: ['.*']

if ( {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +'|') +
      threshold: 10240,
      minRatio: 0.8

if ( {
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())

module.exports = webpackConfig
  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

4条回答 默认 最新

相关推荐 更多相似问题