vue+webpack5项目中全局引入scss

笑道三千

已于 2024-03-14 11:19:50 修改

阅读量3.4k

点赞数 1

分类专栏： # less 文章标签： javascript 前端开发语言

于 2021-11-27 16:00:06 首次发布

本文链接：https://blog.csdn.net/weixin_42349568/article/details/121578631

版权

less 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一，安装插件

npm i sass-resources-loader -D

二，修改wenpack的rule配置

 //全局引入scss变量
    {
      test: /\.(css|scss|sass)$/,
      use: [
        !prodMode
          ? 'style-loader'
          : {
              loader: MiniCssExtractPlugin.loader,
              options: {
                publicPath: '../'
              }
            },
        'css-loader',
        'postcss-loader',
        'sass-loader',

        {
          loader: 'sass-resources-loader',
          options: {
            resources: [
              'src/style/_variables.scss' // 引入全局 SasS 变量的文件（对应你全局文件的路径）
            ]
          }
        }
      ]
    }

三，如果是vue-cli项目怎么办？

在vue.config.js中修改配置即可：

module.exports = {
    css: {
      loaderOptions: {
        scss: {
            prependData: `@import "@/style/tools/index.scss";@import "@/style/settings/var.scss";`// 引入全局 SasS 变量的文件（对应你全局文件的路径）
        },
      }
    }
}