vue-cli 2.x中全局引用公共scss

最新推荐文章于 2023-02-20 11:14:56 发布

南张门

最新推荐文章于 2023-02-20 11:14:56 发布

阅读量578

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Style webpack vue 文章标签： vue-cli引入scss vue-cli引入sass 全局引入scss 全局引入sass scss

本文链接：https://blog.youkuaiyun.com/haochangdi123/article/details/80798816

vue 同时被 3 个专栏收录

16 篇文章

订阅专栏

webpack

11 篇文章

订阅专栏

Style

9 篇文章

订阅专栏

本文介绍如何在项目中安装并配置SCSS，包括必要插件的安装步骤、公共SCSS文件的创建方法及如何全局引入SCSS文件。

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

1.安装scss

这些插件使我们使用scss所必须安装的

    npm install node-sass --save-dev
    npm install sass-loader --save-dev
    npm install style-loader --save-dev  //(vue-cli中如果有就不再安装了)

2.安装sass-resources-loader

这个插件是我们想要全局引用scss所要安装的

 npm install sass-resources-loader --save-dev

3.创建公共scss

这里写图片描述

base.scss

写一些我们需要全局设置的一些基本样式，例如清除浮动

mixin.scss

这个文件就是我们scss的mixin文件了

index.scss

是我们scss的总体引入文件，将我们所有的公共scss引入，这样一来我们只要全局引用index.scss文件就可以了

 //minxin
@import './mixin.scss';
 //全局设置的基本样式
@import './base.scss';

4.全局引入

修改build中的utils.js
我们将

 scss: generateLoaders('sass'),

改为：

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