vue使用sass以及如何选择版本

最新推荐文章于 2024-10-12 10:37:34 发布

野克

最新推荐文章于 2024-10-12 10:37:34 发布

阅读量1.2w

点赞数 9

分类专栏： Vue 文章标签： sass vue.js webpack

本文链接：https://blog.csdn.net/weixin_43193877/article/details/122221052

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前言

在vue项目开发过程中，难免要使用到像sass或less这样对于css的脚本语言
但是对于新手来说，如何使用却犯了难题，安装各种后各种报错等…
接下来帮你缕清思路

首先在这里暂时把sass和scss统一看成sass，结尾有说明

关系链：

vue中欲想使用sass，需要下载sass-loader，sass-loader需要依托于node-sass运行，node-sass的运行环境是node，所以说需要下载sass-loader和node-sass两个包，同时node-sass要兼容node版本。

理解：以当前node版本为起点，寻找兼容的node-sass，根据node-sass版本寻找兼容的sass-loader版本，依次安装即可安然使用。(为啥以node为起点呢？因为如果sass是项目开发中途加入的话，肯定以项目为基础)

node-sass版本库：https://github.com/sass/node-sass/tags

sass-loader版本库：https://github.com/webpack-contrib/sass-loader/releases/tag

tips：GitHub需要翻墙哦~

具体步骤：

打开命令窗口查看当前node版本

node -v

在这里插入图片描述

我的是v14.13.1

然后就去node-sass中查看兼容的版本，嗯…耐下心去翻一番，比如我随便点进一个v6.0.0版本

在这里插入图片描述

Breaking changes中写道：删除对node10的兼容，也就是node10及以下版本是不兼容的
在Features中写道：增加了对node16的兼容，也就是说node版本在11-16之间是可以使用的
我的node版本是14，所以可以使用

那接下来找对应的sass-loader版本，让我们随便点击一个11版本看看…

在这里插入图片描述

可以看到在Features中写道：兼容node-sass v6.0.0版本，哎嘿~ 刚好巧了不是

node兼容node-sass，node-sass兼容sass-loader

那这样的或就可以下载了

npm install --save-dev sass-loader@11.1.0
npm install --save-dev node-sass @6.0.0

tips小技巧：一般在大版本更新后都会带上对应兼容的版本的说明，比如：v2.0.0、v5.0.1…这种大版本的更新里去找

如果你已经下载了其他版本，需要先卸载掉：

npm uninstall sass-loader
npm uninstall node-sass

然后安装对的版本

npm install --save-dev sass-loader@11.1.0
npm install --save-dev node-sass @6.0.0

下载完后直接使用即可

在这里插入图片描述

列出几个版本的组合：

sass-loader 10.1.0，node-sass 5.0.0，node 11-16

sass-loader 11.1.0，node-sass 6.0.0，node 11-16

如何全局使用scss文件

需要共享某个scss文件怎么办？
如果你使用vue-cli 3+ 或 4+ ，你需要在工程文件根目录下新建vue.config.js文件，也就是在packge.json同级目录下，并添加以下代码:

方法一：使用css模块化

在vue.config.js中添加：

// vue.config.js
module.exports = {
    css: {
        loaderOptions: {
            // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
            // 因为 `scss` 语法在内部也是由 sass-loader 处理的
            // 但是在配置 `additionalData` 选项的时候
            // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
            // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
            scss: {
                additionalData: `@import "~@/assets/styles/index.scss";`
            },
        }
    }
}

参考：https://cli.vuejs.org/zh/guide/css.html#css-modules

注意！这里有坑，已填上：

由于sass-loader版本不同，loaderOptions中additionalData的键名也不同！！！

sass-loader v8-，这个版本之前的键名是：data

sass-loader v8，这个版本后的键名是：prependData

sass-loader v10+，这个版本之后的键名是：additionalData
因为现在已经在全局注入了，所以就不要再main.js或其他地方引用了，会报错哦~

方法二：借助style-resources-loader插件

npm i style-resources-loader -D

在vue.config.js中添加：

// vue.config.js
module.exports = {
    chainWebpack: (config) => {
        const oneOfsMap = config.module.rule('scss').oneOfs.store
        oneOfsMap.forEach((item) => {
            item.use('sass-resources-loader')
                .loader('sass-resources-loader')
                .options({
                    // 引入一个全局sass文件
                    // resources: './src/assets/styles/common.scss',

                    // 引入多个全局sass文件
                    resources: [
                        './src/assets/styles/index.scss',
                    ],
                })
                .end()
        })
    },

}