在 Nuxt JS 中使用 SASS 全局变量
在 Nuxt 中使用配置文件管理全局变量非常简单，只需按照以下几个步骤操作即可……
- 步骤 1：将
sass-loaderand添加node-sass到您的项目中
using npm:
npm install --save-dev node-sass sass-loader
using yarn:
yarn add --dev node-sass sass-loader
- 步骤 2：将插件添加
style-resources到您的项目中。如果您不了解插件，请参阅NuxtJS 文档。您也可以在此处查看提到的插件。
using npm:
npm install --save-dev @nuxtjs/style-resources
using yarn:
yarn add --dev @nuxtjs/style-resources
- 步骤 3：在您的目录中添加
assets一个新的 sccs 目录（您的全局变量文件将存储在这里，您可以根据需要使用任意数量的文件）
我的colors.scss文件看起来是这样的
$white: #fff;
$black: #000;
$green: #43976c;
/* All the variables you want */
我们怎么上来？快到了！加油！
- 步骤 4：修改
nuxt.config.js文件以映射新样式
export default {
//...
css: [
'~assets/scss/colors.scss'
],
//...
modules: [
'@nuxtjs/style-resources'
],
//You will have to add this new object if it doesn't exist already
styleResources: {
scss: ['./assets/scss/*.scss']
},
//...
}
我们成功了！！就是这样！👍 👍 现在我们可以在任何地方使用这些新变量，而无需导入任何内容。
例如
// Don't forget to specify lang="scss"
<style lang="scss" scoped>
.my-css-class {
width: 90%;
height: 2px;
background-color: $green; // Here we are using the variable
border-radius: 5px;
}
</style>
希望这对你有帮助！我会保留我学习所依据的原始帖子。
感谢阅读！
文章来源：https://dev.to/paramo/using-sass-global-variables-in-nuxt-js-j0k