在 vue-cli 中安装使用 scss

最新推荐文章于 2025-07-01 15:44:39 发布

小白阿里里

最新推荐文章于 2025-07-01 15:44:39 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue-cli 文章标签： vue-cli使用scss scss安装使用

本文链接：https://blog.csdn.net/qq_39224266/article/details/82462035

vue-cli 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何通过npm安装node-sass和sass-loader，并在项目中使用SCSS语法进行样式编写。首先运行命令安装node-sass和sass-loader，然后在style标签中设置lang为scss，即可使用SCSS语法。

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

安装 node-sass 和 sass-loader

npm install node-sass --save-dev
npm install sass-loader --save-dev

安装完成后在需要使用的页面的 style 中加入 lang=”scss” 即可，例：

<style lang="scss">
    /* 用来放置变量的 scss 文件 */
    @import '../assets/scss/variable.scss';

    .scroll-list-wrap{
        height: 350px;

        .item{
            padding: 10px 10px;

            &:nth-child(2n+1){
                background: $color-ccc;
            }
        }
    }
</style>