Question

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

$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；

--------- ^“

可以帮助我并让我明白自己的错误方式的人。非常感谢您的帮助和时间

Answer 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

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

1 个答案: