解决vue中使用less/sass及使用中遇到无效的问题

使用Vue框架开发过程中，我们常常会遇到使用less/sass预处理器的情况。本文将基于Vue-cli 3.x版本的脚手架为例，详细介绍如何在Vue项目中使用less/sass，并且解决常见的无效问题。

使用less预处理器

安装

安装 less 和 less-loader：

npm install less less-loader --save-dev

配置

在 vue.config.js 中配置：

module.exports = {
    css: {
        loaderOptions: {
            less: {
                javascriptEnabled: true // 解决.less中@import语法无效的问题
            }
        }
    }
}

使用

在 .vue 文件中引入 less 文件：

<style lang="less">
    /* less 样式代码 */
</style>

使用sass预处理器

安装

安装 sass 和 sass-loader：

npm install sass sass-loader --save-dev

配置

在 vue.config.js 中配置：

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                prependData: `@import "@/assets/scss/variable.scss";`, // 全局引入变量文件
                implementation: require('sass'), // 修改默认的 Sass 实现为 Dart Sass
                sassOptions: {
                    fiber: require('fibers') // 使 Sass 直接继承 Node Sass 的 Fibers 模块，加快编译速度
                }
            }
        }
    }
}

使用

在 .vue 文件中引入 sass 文件：

<style lang="sass">
    /* sass 样式代码 */
</style>

常见问题解决方案

无效的语法

在使用 less/sass 的过程中，经常会遇到@import语法无效的问题。这是因为 Vue-cli 3.x 版本默认启用了 CSSModule，需要进行相应的配置。解决方法如下：

module.exports = {
    css: {
        requireModuleExtension: false
    },
    // ...
}

设置 requireModuleExtension 为 false 即可。

无法使用全局变量

在使用 sass 的过程中，如果在 .vue 文件中引入全局变量文件，会发现无法使用全局变量。原因是 Vue-cli 3.x 版本默认启用了 CSSModule，同样需要进行相应的配置。解决方法如下：

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                prependData: `@import "@/assets/scss/variable.scss";`, // 全局引入变量文件
            }
        }
    },
    // ...
}

在 sass loader 中通过 prependData 添加全局变量的引用。

至此，完整的“解决vue中使用less/sass及使用中遇到无效的问题”的攻略就介绍完了，希望对您有所帮助。