为什么使用
日常开发时,当我们想在vue
单文件中使用全局的scss
变量,我们通常会将整个文件通过@import
的方式引入进来,这非常繁琐。在vue cli
创建的项目汇总,我们通常使用style-resources-loader来解决。
但我们使用Nuxt
创建的项目并不支持这样做。所以nuxt-community
给我们提供了一个工具:@nuxtjs/style-resources
。它的出现让项目no @import needed
具体使用方法
- 安装:
npm i @nuxtjs/style-resources
- 引入
nuxt.config.js
中添加一下语句
buildModules: [
'@nuxtjs/style-resources',
],
styleResources: {
scss: ['~assets/styles/variables.scss'], // 可以是数组也可以是字符串
},
然后在单文件里就可以放心大胆的使用了!
注意点
- 样式文件要放在
assets
下 - 可以使用
~assets/styles/*.scss
,这样引入的是styles
文件夹下所有是scss
文件。 - 还可以配置
sass
、less
、stylus
预处理语言