nuxt 中scss 全局变量的配置

 

 

 

1.插件安装：

npm install css-loader node-sass postcss-loader sass-loader style-loader --save -dev

2.在项目的assets目录下新建一个css目录，然后在该目录下新建一个index.scss文件，用这个文件作为scss的入口文件，在这个文件里引入其他的scss即可，例如：

 

module.exports {
	css: [
	    {src: '~assets/css/index.scss', lang: 'scss'} // 指定
	  ],
}

经过以上配置发现，index.scss中的样式可以在项目中使用了，但遇到了一个问题：
index.scss中的变量不能再页面中直接使用，需要在页面中单独引入才能使用，很麻烦。

4.scss变量全局使用：
参考文档：官网

 

npm install @nuxtjs/style-resources

 nuxt.config.js

module.exports {
	css: [
	    {src: '~assets/css