Internal server error: CssSyntaxError

LinkSofuny commented 2 years ago

这个报错信息无法定位, 令我十分费解.

上午10:35:48 [vite] Internal server error: CssSyntaxError: /boss-admin/src/project/system/App.vue?vue&type=style&index=0&rel=stylesheet%2Fless&lang.less:1:0: Unknown word

1 | | ^ 2 | 3 |

Plugin: vite-plugin-vue2 File:/boss-admin/src/project/system/App.vue

// App.vue
<template lang="pug">
  div
    router-view(v-if="isRouterAlive")
</template>

<script>
export default {
    name: 'App',
    provide() {
        return {
            reload: this.reload,
        }
    },
    data() {
        return {
            isRouterAlive: true,
        }
    },
    methods: {
        reload() {
            this.isRouterAlive = false
            this.$nextTick(function () {
                this.isRouterAlive = true
            })
        },
    },
}
</script>
<style lang="less" rel="stylesheet/less">
@import '@/assets/less/reset.less';
@import '@/assets/less/element-custom.less';
@import '@/assets/less/global.less';
</style>

LinkSofuny commented 2 years ago

目前大概定位在 style模块, 我如果把style标签全部删掉, 就不会报错. 另外在vue2的普通组件中也会报这样的错误

单独删除 lang="less" rel="stylesheet/less"
单独删除 style内样式

以上两种情况同样会报错

LinkSofuny commented 2 years ago

import { defineConfig } from 'vite'
import path from 'path'
import { viteCommonjs } from '@originjs/vite-plugin-commonjs'
import { createVuePlugin } from 'vite-plugin-vue2'
import Inspect from 'vite-plugin-inspect'
import { fileURLToPath } from 'url'
import aliasDefualt from './plugins/vite-plugin-alias-defualt.js'

const log = (v) => console.log(v)
function getPath(dir) {
    return path.resolve(path.dirname(fileURLToPath(import.meta.url)), dir)
}

const projectPath = (projectName) => getPath(`src/project/${projectName}`)

export default defineConfig({
    plugins: [
        // 这个 plugin 是自定义的, 解决路径问题
        aliasDefualt({ src: getPath('src') }),
        viteCommonjs([]),
        {
            enforce: 'post',
            ...createVuePlugin({
                jsx: true,
            }),
        },
        // Inspect(),
    ],
    resolve: {
        alias: [
            { find: '@', replacement: getPath('src') },
            /** 解决element-ui 内部找不到 async-validator 模块的问题*/
            { find: 'async-validator', replacement: 'node_modules/async-validator/dist-web/index.js' },
            { find: 'v-viewer', replacement: 'node_modules/v-viewer' },
        ],
    },
    server: {
        open: '/index-vite.html',
    },
    css: {
        preprocessorOptions: {
            less: { additionalData: `@import "${getPath('src')}/assets/less/theme.less";` },
        },
    },
})

LinkSofuny commented 2 years ago

调试了一个下午, 似乎是因为 vite-plugin-vue2 解析style之后, 会变成这样的一个文件, 这个位置会有很多换行符, 但是无法识别

调试源码发现抛错地方

// postcss/lib/parse.js
function parse(css, opts) {
  var input = new _input.default(css, opts);
  var parser = new _parser.default(input);

  try {
    parser.parse(); // 这里抛的错
  } catch (e) {
    if (process.env.NODE_ENV !== 'production') {
      if (e.name === 'CssSyntaxError' && opts && opts.from) {
        if (/\.scss$/i.test(opts.from)) {
          e.message += '\nYou tried to parse SCSS with ' + 'the standard CSS parser; ' + 'try again with the postcss-scss parser';
        } else if (/\.sass/i.test(opts.from)) {
          e.message += '\nYou tried to parse Sass with ' + 'the standard CSS parser; ' + 'try again with the postcss-sass parser';
        } else if (/\.less$/i.test(opts.from)) {
          e.message += '\nYou tried to parse Less with ' + 'the standard CSS parser; ' + 'try again with the postcss-less parser';
        }
      }
    }

    throw e;
  }

  return parser.root;
}

underfin / vite-plugin-vue2

Internal server error: CssSyntaxError #175