scss定义全局变量,vue动态修改scss变量

　　本文主要介绍在vue中配置scss全局变量的步骤，帮助你更好的理解和使用vue框架。感兴趣的朋友可以了解一下。

　　在编写项目的过程中，如果使用scss编写样式代码，往往需要定义各种变量，如主题颜色、主字号等。所以我们将这些变量写入一个单独的_variable.scss文件。但是每次都把这些变量引入到vue单个文件中太繁琐了，那么有没有办法默认引入变量文件作为全局文件呢？答案是肯定的，可以通过以下方法进行配置，方法可以根据当前使用的框架和环境来选择。

一、使用vue-cli（即vue-cli2）脚手架时

　　1.首先，您需要安装一个加载程序，sass-resources-loader。

　　npm安装sass-资源-加载程序-保存-开发

　　2.在构建文件夹中找到utils.js文件，并在文件中找到这个配置代码。

　　返回{

　　css: generateLoaders()，

　　postcss: generateLoaders()，

　　less: generateLoaders(less )，

　　sass: generateLoaders(sass ，{ indentedSyntax: true })，

　　scss: generateLoaders(sass )，

　　手写笔：generateLoaders(“手写笔”)，

　　手写笔：生成器加载器(“手写笔”)

　　}

　　3.将scss项目修改如下

　　scss: generateLoaders(sass )。concat({

　　加载程序： sass-resources-loader ，

　　选项：{

　　resources:path . resolve(_ _ dirname，./src/styles/_variable.scss )

　　}

　　})

　　4.重新启动项目，以便在其他文件中使用这些变量文件。

二、使用@vue/cli（即vue-cli3）脚手架时

　　1.找到vue.config.js文件，如果没有，在根目录下新建一个。

　　2.在文件中编写以下代码：

　　模块.导出={

　　css: {

　　loaderOptions: {

　　萨斯：{

　　data:` @ import @/styles/_ variable . scss ；`

　　}

　　}

　　}

　　}

　　3.重启项目就可以用了。

　　注意：如果编写了上述代码，则在重新启动项目后会出现此错误：

　　无效的选项对象。Sass加载程序已使用与API架构不匹配的选项对象初始化。

　　然后，你安装的sass-loader应该是v8版本，可以在package.json中查看真假，如果是V8版本以上，就需要配置不同的写法，因为配置项data在V8中已经被废除，改为prependData。你可以在vue cli官网看到这个描述。[门户网站]

　　因此，我们需要将配置代码修改为以下样式：

　　css: {

　　loaderOptions: {

　　萨斯：{

　　prepend data:` @ import ~ @/styles/_ variable . scss ；`

　　}

　　}

　　}

　　好了，重启项目，就大功告成了。

　　以上是在vue中配置scss全局变量的详细步骤。关于在vue中配置scss全局变量的更多信息，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。