在vue-cli中如何安装scss，并全局引入scss

最新推荐文章于 2024-07-06 14:19:45 发布

weixin_33727510

最新推荐文章于 2024-07-06 14:19:45 发布

阅读量814

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/guoliping/p/11112700.html

本文详细介绍了如何在Vue CLI项目中正确配置并使用SCSS，包括安装必要的依赖包，修改构建工具的设置，以及如何在组件中应用SCSS样式。通过创建一个全局的.scss文件，可以方便地管理项目的样式资源。

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

在vue-cli脚手架采用scss正确的使用姿势

步骤一：安装node-sass、sass-loader、style-loader

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

步骤二：安装sass-resources-loader

npm install sass-resources-loader --save-dev

步骤三：修改build中的utils.js

scss: generateLoaders('sass')

    修改成:

    scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/assets/global.scss')
        }
      }
    )

可知，我是在assets中创建了一个global.scss文件。

最后，在组件中的style标签添加lang="scss"，就OK了。

=======================================================

各位如果引入和使用中有任何问题可以给我发私信联系

转载于:https://www.cnblogs.com/guoliping/p/11112700.html