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

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

该问题目前已经被锁定, 无法添加新回复

  • 标题 / 粗斜体
  • 代码片段
  • 超链接 / 图片 / 视频
  • 列表 / 引用

文章内容较多时,可以用标题分段 :

## 大标题 
### 小标题

斜体 / 粗体 :

**粗体** 
*斜体*
***粗斜体***

代码片段 :

``` javascript
代码片段
```

超链接 :

[链接文字](链接地址) 例: [百度](http://www.baidu.com)

图片 :

![图片说明](图片地址) 例: ![百度logo](http://www.baidu.com/img/bdlogo.gif)

视频 :

!![视频说明](视频地址) 例: !![优酷视频](http://youku.com)

有序列表 :

1. 123
2. 123
3. 123

无序列表 :

- 123
- 123
- 123

引用 : ( 双回车后结束引用 )

> 引用内容
引用内容
引用内容