很多博客都是讲的很混乱,配置也没有说清楚,所以在此记录一下,方便自己学习

首先可以去看VueCLi的官网,地址是https://cli.vuejs.org/zh/guide/creating-a-project.html

1.安装预处理器

# Sass
npm install -D sass-loader sass

# Less
npm install -D less-loader less

# Stylus
npm install -D stylus-loader stylus

在这里插入图片描述

在这里插入图片描述
但是你会发现,只是看完文档,然后你去操作,还是报错:
官方文档是这样写的,我就不贴这部分代码了,因为还是会报错
在这里插入图片描述
报错如下:
在这里插入图片描述

配置vue.config.js-方法1

module.exports = {
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.sass` 这个文件
        // 注意:在 sass-loader v8 中,这个选项名是 "prependData"
        prependData : `@import "~@/assets/main.sass"`
      },
      // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
      // 因为 `scss` 语法在内部也是由 sass-loader 处理的
      // 但是在配置 `prependData` 选项的时候
      // `scss` 语法会要求语句结尾必须有分号,`sass` 则要求必须没有分号
      // 在这种情况下,我们可以使用 `scss` 选项,对 `scss` 语法进行单独配置
      scss: {
        prependData : `@import "~@/assets/main.scss";`
      }
    }
  }
}

**注意:**这里的把additionalData属性换成了prependData ,不然会出现版本问题

在使用最新版本的sass-loader(version>=8.0.0)的时候 additionalData 这个配置已经不再支持,这里是本次更新的issus(https://github.com/webpack-contrib/sass-loader/issues/760 ),而是使用 prependData 代替,所以,配置如上

配置vue.config.js-方法2

vue.config.js文件

module.exports = {
  chainWebpack: (chain) => {
      const oneofsMap =  chain.module.rule('scss').oneOfs.store
      oneofsMap.forEach(item=>{
          item
          .use('sass-resources-loader')
          .loader('sass-resources-loader')
          .options({
            resources: './node_modules/element-plus/dist/main.scss',
          })
      })
  }
}

以上两种方法我都测试过了,现阶段可以使用,如果以后sass预处理器又出现新的语法,那可能还是需要取sass官网查看,希望能够帮到大家

Logo

前往低代码交流专区

更多推荐