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"

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3 + TypeScript + Vite 项目中使用 SCSS 预处理器,你需要遵循以下步骤: 1. 在项目中安装 `sass` 和 `sass-loader`: ``` npm install sass sass-loader --save-dev ``` 2. 确保你的 `tsconfig.json` 中开启了 `"experimentalDecorators": true` 和 `"emitDecoratorMetadata": true` 选项。 3. 在 `vite.config.ts` 中配置 `sass-loader`: ```typescript import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import path from 'path'; export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': path.resolve(__dirname, 'src') } }, css: { preprocessorOptions: { scss: { additionalData: `@import "@/styles/main.scss";` } } } }); ``` 在这个例子中,我们将 `main.scss` 文件导入到所有的 SCSS 文件中。 4. 创建一个 `main.scss` 文件,并在其中包含您的 SCSS 样式。 ```scss // Variables $primary-color: #007bff; $secondary-color: #6c757d; // Mixins @mixin button-variant($background-color) { background-color: $background-color; color: white; border: none; border-radius: 4px; padding: 10px 20px; cursor: pointer; transition: background-color 0.3s ease; &:hover { background-color: lighten($background-color, 10%); } &:active { background-color: darken($background-color, 10%); } } // Styles .primary-button { @include button-variant($primary-color); } .secondary-button { @include button-variant($secondary-color); } ``` 5. 在组件中使用您的 SCSS 样式。 ```vue <template> <div> <button class="primary-button">Primary Button</button> <button class="secondary-button">Secondary Button</button> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ name: 'MyComponent' }); </script> <style lang="scss"> /* Additional styles for this component */ </style> ``` 这样,您就可以在 Vue3 + TypeScript + Vite 项目中使用 SCSS 预处理器,并为每个组件编写自己的样式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值