vue使用scss，并且全局引入公共scss样式

Myth丶恋晨 2022-01-17 00:39 722阅读 0赞

要如何在我们的vue项目中全局引入scss文件呢？

1.  `main.js`可以直接`import css`文件，而不可以直接`import scss`文件。
2.  在index.html中link引入的话，不起作用。
3.  公共样式可以写在app.vue这个父组件的style标签中，这样我们写的子组件就能继承这些公共样式，但是！！！我们自定义的scss的变量继承不了！！

如果我们想使用公共的scss样式变量（比如a`pp的主题颜色`），我们就只能是每写一个`.vue`文件都要在style标签里面  
`@import “global.scss”`这个公共scss样式文件，但是这样做，会很麻烦。

（上述情况，less同sass一样，存在这些问题，但是less没有以下解决办法，sass有。）

但也有办法解决，步骤如下：

1.  安装`node-sass、sass-loader、style-loader`

yarn add node-sass
    yarn add sass-loader
    yarn add style-loader

1.  安装`sass-resources-loader`

yarn add sass-resources-loader

1.  修改build中的`utils.js`

将
    scss: generateLoaders('sass')
    修改成:
        scss: generateLoaders('sass').concat(
          { 
            loader: 'sass-resources-loader',
            options: { 
              resources: path.resolve(__dirname, '../src/assets/global.scss')
            }
          }
        )

可知，我是在assets中创建了一个global.scss 作为公共样式文件。  
最后在vue组件中的style标签中添加`lang="scss"`，就ok了。这样我们就实现了全局引入scss。

[转载地址][Link 1]

[Link 1]: https://www.jianshu.com/p/78efb07949f5

发表评论取消回复

表情：

评论列表（有 0 条评论，722人围观）

还没有评论，来说两句吧...

相关阅读

相关全局scss

css: { loaderOptions: { sass: { prependData: ` @imp

快来打我*/ 2022年11月19日 04:29/ 0 赞/ 156 阅读

相关 vue 导入全局scss

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

比眉伴天荒/ 2022年11月04日 13:21/ 0 赞/ 169 阅读

相关 vue项目全局中引入scss

一、概述有一个scss文件，需要应用到每一个vue文件。如果每一个vue文件写重复代码，浪费精力。关于scss的安装，请参考链接：[https://www.cnbl

朴灿烈づ我的快乐病毒、/ 2022年10月15日 11:52/ 0 赞/ 211 阅读

相关 vue——scss变量全局使用

vue——scss变量全局使用 1.终端安装sass-resources-loader npm install sass-resources-loader

爱被打了一巴掌/ 2022年10月04日 15:42/ 0 赞/ 261 阅读

相关 vue中全局使用scss

在vue中全局使用scss需要先安装 sass-resources-loader，使用npm install sass-resources-loader --save-dev

港控/mmm°/ 2022年05月08日 05:28/ 0 赞/ 320 阅读

相关 vue项目引入scss、elementui使用全局scss修改主题色，vue的路由引入；less的使用

一、vue项目引入scss [https://blog.csdn.net/Ag\_wenbi/article/details/87799557][https_blog.csd

布满荆棘的人生/ 2022年01月22日 05:49/ 0 赞/ 1431 阅读

相关 Vue-Cli 3 引入 SCSS 全局变量

首先创建一个全局变量文件 `global.scss` $theme-color: efefef; 复制代码编辑`vue.config.js`

以你之姓@/ 2022年01月19日 00:21/ 0 赞/ 560 阅读

相关 vue使用scss，并且全局引入公共scss样式

要如何在我们的vue项目中全局引入scss文件呢？ 1. `main.js`可以直接`import css`文件，而不可以直接`import scss`文件。 2. 在i

Myth丶恋晨/ 2022年01月17日 00:39/ 0 赞/ 723 阅读

相关 vue 全局使用scss 变量

1.安装scss npm install --save-dev sass-loader //sass-loader依赖于node-sass npm i

野性酷女/ 2022年01月12日 03:09/ 0 赞/ 1043 阅读

相关如何在Vue中全局引入bass.scss？

作者：kim 来自：kimshareclub微信公众号 1、安装sass资源加载器 npm install sass-resources-loader -D

╰+攻爆jí腚メ/ 2021年09月16日 23:36/ 0 赞/ 361 阅读