vue-cli配置sass以及使用

最新推荐文章于 2024-03-01 14:52:07 发布

weixin_34226706

最新推荐文章于 2024-03-01 14:52:07 发布

阅读量138

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python webpack ViewUI

原文链接：https://my.oschina.net/u/1773772/blog/1925078

本文详细介绍如何在项目中配置SCSS预处理器与Webpack的整合流程。从安装依赖到修改配置文件，再到全局变量的引入，最后通过示例展示如何在实际项目中应用SCSS。适合初学者和有一定经验的前端开发者参考。

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

2019独角兽企业重金招聘Python工程师标准>>>

1. 安装依赖
npm install node-sass --save-dev
npm install sass-loader --save-dev

2.修改：webpack.base.config.js  (在loaders里面加入以下代码)
{
  test: /\.scss$/,
  loaders: ["style", "css", "sass"]
}

3.全局使用依赖
npm install sass-resources-loader --save-dev

4.修改:build/utils.js
scss: generateLoaders('sass')
修改为:
scss: generateLoaders('sass').concat(
  {
    loader: 'sass-resources-loader',
    options: {
      //你自己的scss全局文件的路径
      resources: path.resolve(__dirname, '../src/common/scss/index.scss')
    }
  }
)

5.index.scss 示例
//重置样式
@import './reset.scss';
//minxin
@import './mixin.scss';
//全局基本样式
@import './base.scss';

6.使用示例
<style lang="scss" type="text/css">
h1 { color: $color }
</style>

转载于:https://my.oschina.net/u/1773772/blog/1925078