vue-cli中配置sass

女爷i 2022-05-20 09:23 278阅读 0赞

如何配置sass

一、安装对应依赖node模块：

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

二、打开webpack.base.config.js在loaders里面加上

rules: [
          {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: vueLoaderConfig
          },
          {
            test: /\.js$/,
            loader: 'babel-loader',
            include: [resolve('src'), resolve('test')]
          },
          {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: 'url-loader',
            query: {
              limit: 10000,
              name: utils.assetsPath('img/[name].[hash:7].[ext]')
            }
          },
          //这是新添加的
          {
            test: /\.scss$/,
            loaders: ["style", "css", "sass"]
          },
          {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            loader: 'url-loader',
            query: {
              limit: 10000,
              name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
            }
          }
        ]
      }

三、在用scss的地方写上

<style lang="scss" scoped="" type="text/css"> /*可以写scss了*/ </style>

本文转自：[https://www.cnblogs.com/rainheader/p/6505366.html][https_www.cnblogs.com_rainheader_p_6505366.html]

[https_www.cnblogs.com_rainheader_p_6505366.html]: https://www.cnblogs.com/rainheader/p/6505366.html

发表评论取消回复

表情：

评论列表（有 0 条评论，278人围观）

还没有评论，来说两句吧...

相关阅读

相关 vuecli3 多页面配置

vuecli3 多页面配置项目结构 1. login文件配置（有配置路由） login文件目录 lo

落日映苍穹つ/ 2023年01月19日 03:24/ 0 赞/ 440 阅读

相关 vuecli脚手架配置文件说明

vuecli脚手架座右铭：越努力越幸运，越运动越健康。热爱计算机技术，热爱运动的这样一个人 -------------------- 文章目录 vuec

快来打我*/ 2022年12月23日 11:29/ 0 赞/ 266 阅读

相关快速部署vuecli3 vuecli搭建 vuecli

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

本是古典何须时尚/ 2022年12月22日 11:07/ 0 赞/ 333 阅读

相关 sass在vue中配置

1.创建variable.scss 文件 // 颜色 $color-red:red; $color-yellow: yellow; $color-white: whit

骑猪看日落/ 2022年11月06日 05:55/ 0 赞/ 200 阅读

相关 vuecli4中配置服务器

元气满满，直接干！在使用vuecli4开发项目时，如果需要自己开发服务器测试项目，单独编写一个服务器，非常难受！这时，我们可以在vuecli4中直接进行服务器开发。过

女爷i/ 2022年09月02日 00:44/ 0 赞/ 297 阅读

相关 vuecli4中配置打包使用相对路径

元气满满，直接干！使用vuecli4进行项目打包时，默认使用的是根目录的方式，这样打包直接项目直接运行就是一个大白屏，非常难受！这时我们就需要在设置打包使用相对目录的方

╰半橙微兮°/ 2022年09月02日 00:44/ 0 赞/ 334 阅读

相关 vuecli4中手动配置less或者scss

元气满满，直接干~~ 假设我们创建项目时选择的是scss，但是项目中我们突然想要使用less,直接使用的话就会报错，非常难受。这时我们需要做的非常简单，只需要在项目中安装

布满荆棘的人生/ 2022年09月02日 00:43/ 0 赞/ 309 阅读

相关 vuecli4中配置px自动转换vw

元气满满，直接干~~~ 移动端使用vw实现响应式布局时，需要自己计算vm的数值，非常难用！什么是vw：默认将屏幕宽度分为100份，1vw = 一份。在vuecli4中

浅浅的花香味﹌/ 2022年09月02日 00:43/ 0 赞/ 210 阅读

相关 vue-cli中配置sass

如何配置sass 一、安装对应依赖node模块： npm install node-sass --save-dev npm install sass-loa

女爷i/ 2022年05月20日 09:23/ 0 赞/ 279 阅读

相关 vue Webpack 中sass配置文件

vue学习日记：在项目中引用sass vue-cli生成的项目引入sass方法: 安装注意事项 sass-loader 版本不能高于 7.3.1 npm i

谁践踏了优雅/ 2021年12月16日 09:25/ 0 赞/ 437 阅读