如何将全局样式表导入组件 vue？

Posted 2023-02-23

【中文标题】如何将全局样式表导入组件 vue？

【英文标题】：how to import into a component vue the global stylesheet?

【发布时间】：2020-11-24 06:03:07

【问题描述】：

我正在使用 VueJS 开始我的第一个项目，并按照我想创建一个全局样式表的文档和教程，以便在不同的组件中使用相同的样式。我已经安装了 scss 加载器并创建了我的样式表

$mainFont: 'PoppinsRegular, Arial';
$mainFontSemiBold: 'PoppinsSemiBold, Arial';
$mainFontItalic: 'PoppinsRegularItalic, Arial';

$primaryColor: #fff;
$secondaryColor: #dce0e6;
$tertiaryColor: #f0f4f7;
$quaternaryColor: #233240;
$quinaryColor: #0e5fa4;
$senaryColor: #14a30f;
$septenaryColor: #cd3c2d;
$octonaryColor: #6C757D;
$undenaryColor: #7e848c;
$duodenaryColor: #19b4c2;

我已按照文档中的说明将此样式表导入 main.js，尝试了两种不同的方式

import Vue from 'vue'
import App from './App.vue'
import './assets/scss/_variables.scss'

// this is the second way I've tested// require('./assets/scss/_variables.scss')

Vue.config.productionTip = false

new Vue(
  render: h => h(App),
).$mount('#app')

在将其导入 main.js 后，我在“home”组件中修改了样式部分的标题并导入了样式表中声明的一种颜色

<style lang='scss' rel='./assets/scss/_variables'>
h3 
  margin: 40px 0 0;

ul 
  list-style-type: none;
  padding: 0;

li 
  display: inline-block;
  margin: 0 10px;

a 
  color: $septenaryColor;

</style>

毫无疑问，我做错了什么，因为控制台抛出了一个错误，它无法识别我的样式中的颜色参考

“模块构建失败（来自 ./node_modules/sass-loader/dist/cjs.js）： SassError：未定义的变量：“$septenaryColor”。 在 src/components/HelloWorld.vue 的第 56 行

颜色：$septenaryColor;

---------^"

有人可以帮助我，让我看到我的方式的错误。 非常感谢您的帮助和时间

【问题讨论】：

试试这个：vue gloab styles ;)

【参考方案1】：

要实现这一点，您必须修改您的vue.config.js。

module.exports = 
  css: 
    loaderOptions: 
      sass: 
        prependData: `
          @import "@/style/index.scss"; // path to file with your global styles
        `
      
    
  
;

然后每个组件都可以访问此文件中的所有样式。 有关此的更多信息，您可以在这里阅读：Globally Load SASS into your Vue.js Applications