vue-cli3.0解决报错error in ./src/views/homepage.vue?vue&type=style&index=0&id=e20931f0&lang=scss&scoped

最新推荐文章于 2024-03-08 18:36:47 发布

转载最新推荐文章于 2024-03-08 18:36:47 发布 · 4.4w 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://blog.csdn.net/weixin_41530979/article/details/104380654

收录于

vue 同时被 2 个专栏收录

57 篇文章

订阅专栏

Sass

4 篇文章

订阅专栏

本文介绍如何在Vue项目中通过配置vue.config.js文件，实现Sass全局变量的引入，以提高代码复用性和维护性。具体步骤包括修改sass loader的配置，将data属性改为prependData，并指定全局Sass文件路径。

配置的配置vue.config.js文件中修改：

把sass里面的data改为prependData

 // css相关配置 配置高于chainWebpack中关于css loader的配置
 css: {
  // 是否使用css分离插件 ExtractTextPlugin
  extract: true,
  // 开启 CSS source maps?是否在构建样式地图，false将提高构建速度
  sourceMap: false,
  // css预设器配置项
  loaderOptions: {
    sass: {
      prependData: `
        @import "@/assets/scss/_variable.scss";
      `
    }
  },
  // 启用 CSS modules for all css / pre-processor files.
  modules: false
 },

然后重新启动项目就ok了