vue3 + vite 导入公共scss文件无效的问题

以下是vite.config.js的相关配置

 import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

const isProduction = false;
// https://vitejs.dev/config/
export default defineConfig({
  // 在生产中服务时的基本公共路径
  base: isProduction ? './' : '',
  // 配置中指明将会把 serve 和 build 时的模式都覆盖掉,serve 时默认 'development',build 时默认 'production'
  mode: 'development',
  // 在开发时会被定义为全局变量,而在构建时则是静态替换
  define: '',
  // 静态资源服务的文件夹
  publicDir: 'assets',
  resolve: {
    // 配置别名
    alias: [{
      find:'@',
      replacement: path.resolve(__dirname, 'src')
    }]
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "./src/assets/style/common.scss";'
      }
    }
  },
  server: {
    host: '0.0.0.0',
    port: 3000,
    open: true,
    https: false,
    proxy: {}
  },

  plugins: [vue()]
})

配置之后重启,没有报错信息,也没有css样式效果
无效的原因:app.vue里面style 没有加上 lang="scss"

你可能感兴趣的:(vue,vue.js)