Vue2.0设置全局样式(less/sass和css)

最新推荐文章于 2025-04-27 10:08:42 发布

豆i浆

最新推荐文章于 2025-04-27 10:08:42 发布

阅读量3.2w

点赞数 1

分类专栏： vue-js 文章标签： vue

本文链接：https://blog.youkuaiyun.com/sinat_19327991/article/details/72884523

版权

vue-js 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了在Vue2.0中设置全局样式的步骤，包括在main.js中引入样式，修改webpack配置，安装依赖，处理权限问题，并提供了在组件中使用LESS或SASS时的注意事项，以及如何链接公共样式文件实现多文件全局样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为Vue设置全局样式需要几个步骤(如果是sass将less改成sass即可)

第一：在src目录下的main.js,也就是入口文件里面添加下面代码

require('!style-loader!css-loader!less-loader!./common/less/index.less')

在Vue1.0版本中可以这样写，但是2.0版本中就不行，会报错提示解析错误

require('./common/less/index.less')

第二步：在build目录下的webpack.base.conf.js配置模块，只需要在 rules下面加两个模块即可

module.exports = {
    module: {
        rules: [
            {
                test: /\.less$/,
                loader: 'style-loader!css-loader!less-loader'
            },
            {
                test:/\.css$/,
                loader:'css-loader!style-loader',
            }
        ]       
    }           
}