webpack配置全局scss

原创已于 2025-03-08 23:58:29 修改 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #webpack #scss

于 2023-11-20 14:31:10 首次发布

后台管理系统同时被 3 个专栏收录

71 篇文章

订阅专栏

vue项目中常用操作

71 篇文章

订阅专栏

scss

5 篇文章

订阅专栏

文章介绍了如何在Webpack5环境下配置全局SASS，利用`resolve.alias`和`sass-loader.prependData`方法，使得Vue组件无需导入单独的scss文件，直接使用全局变量。同时提及了相关的依赖版本如node-sass和webpack-cli。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack配置全局scss

效果：a.vue使用index.scss中定义的$mainWidth就无需 @import "xxxxxxx/index.scss"文件

src/assets/styles/index.scss

$mainWidth: 1280px;
$red: red

src/views/a.vue

.aaa {
  color: $red;
}

vue.config.js

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src'),
        component: path.resolve(__dirname, './src/components'),
        outDic: path.resolve(__dirname, './'),
      } // 路径别名
    },
  },
    css: {
      loaderOptions: {
          sass: {
              prependData: `@import "./src/assets/styles/index.scss";`  // todo 文件路径替换成自己的 
          }
      } // 全局样式文件
    }
}

node v14.21.3
webpack 5.24.2
webpack-cli 4.5.0
@vue/cli 4.5.12

"node-sass": "^4.14.1",
"sass-loader": "^8.0.0",

vite配置全局scss-CSDN博客文章浏览阅读2次。vite配置全局scsshttps://blog.csdn.net/m0_74149462/article/details/146125415?sharetype=blogdetail&sharerId=146125415&sharerefer=PC&sharesource=m0_74149462&spm=1011.2480.3001.8118