不会飞的黄老板
不会飞的黄老板
  • 发布:2022-04-22 13:19
  • 更新:2022-09-08 14:32
  • 阅读:1270

uniapp项目安装vuetify库sass-loader不能正常编译

分类:uni-app

请问uniapp是否能使用vuetify组件库,目前项目中想使用MD风格的组件,编译成微信小程序使用

以下是我的操作方法,目前不能运行成功,想知道如果能使用vuetify的操作流程是怎么样的

新建的uniapp项目想使用vuetify组件库,发现安装之后组件里面的sass文件不能正常编译,报错日志

Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js):  
SassError: Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"  
        on line 49 of G:\workspace\HBuilderProjects\abcedf\node_modules\vuetify\src\styles\main.sass  
>> $uni-font-size-paragraph: 30rpx;

看到最后一行的提示,想到 uni.scss 文件中有这个变量,于是将此文件删除
奇怪的是项目中的 uni.scss 文件删除之后运行也还是有最后一行的报错提示

将hbuilder插件中的【scss/sass编译】插件删除之后
通过npm手动安装sass-loader,同时在vue.config.js中配置好loader
但是运行的时候会自动下载【scss/sass编译】插件,然后又是上面的的错误日志

相当于不能通过vue.config.js配置loader来编译vuetify这个组件库中的sass代码

scss/sass编译 插件
https://ext.dcloud.net.cn/plugin?name=compile-node-sass

vue.config.js文件

module.exports = {  
    configureWebpack: (config) => {  
        config.module.rules.push({  
            test: /\.s(c|a)ss$/,  
            use: [  
                'vue-style-loader',  
                'css-loader',  
                {  
                    loader: 'sass-loader',  
                    options: {  
                        implementation: require('sass'),  
                        sassOptions: {  
                            indentedSyntax: true  
                        },  
                    },  
                },  
            ]  
        })  
    }  
}

loader 安装参考的 vuetify 的webpack安装方式文档
https://vuetifyjs.com/zh-Hans/getting-started/installation/#webpack-5b8988c5

2022-04-22 13:19 负责人:无 分享
已邀请:
c***@163.com

c***@163.com

你好,请问uniapp中能正常使用vuetify嘛?您还再使用uni+vuetify开发嘛?

  • 1***@qq.com

    你好,请问您还再使用uni+vuetify开发吗?

    2022-10-10 17:45

  • c***@163.com

    回复 1***@qq.com: 没有了欸

    2022-12-28 16:35

要回复问题请先登录注册