站点图标 独书先生

nuxt sass全局引入不起作用bug

问题

nuxt 全局引入sass时,官方例子有bug, github上已经有各种讨论,有很多方法是旧版本的解决方案,无法使用

解决方案

基于 nuxt 2.0.0版本的解决方案

步骤一

安装npm包

npm i -D @nuxtjs/style-resources sass-loader node-sass

步骤二

配置nuxt.config.js

module.exports = {
    // Other nuxt.config.js

    modules: ['@nuxtjs/style-resources'],
    styleResources: {
        scss: [
            'assets/css/global.scss',
            'assets/css/main.scss'
        ]
    }
}

扩展

附上2.0.0之前的旧版本的配置,可能有用,未尝试,但是 2.0.0 版本没有用

步骤一

安装npm包

npm i nuxt-sass-resources-loader

步骤二

配置nuxt.config.js

module.exports = {
    // Other nuxt.config.js

    modules: [
        [
            'nuxt-sass-resources-loader', 
            [
                'assets/css/global.scss',
                'assets/css/main.scss'
            ]åç
        ]
    ]
}
退出移动版