安装依赖;
 cnpm  i  sass-loader -D
cnpm i node-sass -D
node-sass尽量去使用cnpm去安装

创建index2.scss文件

div {
h2 {
background: pink;
}
}

在main.js中引入

import "./css/index2.scss";

在webpack.config.js配置

  module: {
rules: [
//所有第三方模块的匹配规则
{ test: /\.css$/, use: ["style-loader", "css-loader"] },
// 配置less处理
{ test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] },
{ test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] },
],
},

webpack配置scss的更多相关文章

  1. webpack实现scss编译配置

    1.webpack.start.js: var webpack = require('webpack'); var SpritesmithPlugin = require('webpack-sprit ...

  2. webpack配置这一篇就够

    最近看了一篇好文,根据这个文章重新梳理了一遍webpack打包过程,以前的一些问题也都清楚了,在这里分享一下,同时自己也做了一些小的调整 原文链接:http://www.jianshu.com/p/4 ...

  3. vue全家桶安装以及修改webpack配置新增vue项目启动方式

    一.安装node环境(自带npm) 下载地址 二.替换下载源 // 淘宝 NPM 镜像 npm install -g cnpm --registry=https://registry.npm.taob ...

  4. vue-cli中webpack配置详解

    vue-cli是构建vue单页应用的脚手架,命令行输入vue init <template-name> <project-name>从而自动生成的项目模板,比较常用的模板有we ...

  5. storybook配置之基本配置和webpack配置

    默认配置 Storybook有一个默认的适合(suits)大型项目开发的webpack配置,假如你使用react app,他类似于创建一个react app的配置,并经过调整(tweaked ),使其 ...

  6. vue-cli webpack配置 简单分析

    vue-cli webpack配置分析 入口 从package.json可以看到开发和生产环境的入口. "scripts": { "dev": "no ...

  7. vue-cli 中的 webpack 配置详解

    本篇文章主要介绍了 vue-cli 2.8.2 中的 webpack 配置详解, 做个学习笔记 版本 vue-cli 2.8.1 (终端通过 vue -V 可查看) vue 2.2.2 webpack ...

  8. vue-cli中的webpack配置

    编辑模式下显示正常,打开的时候不知道为啥排版有问题.segementfalut链接在这里 版本号 vue-cli 2.8.1 (终端通过vue -V 可查看) vue 2.2.2 webpack 2. ...

  9. 对vue中 默认的 config/index.js:配置的详细理解 -【以及webpack配置的理解】-config配置的目的都是为了服务webpack的配置,给不同的编译条件提供配置

    当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面  (环境变量及其基本变量的配置) var path = require('path') ...

  10. webpack 配置学习笔记

    最简单的 webpack 配置 const path = require('path') module.exports = { entry: './app/index.js', output: { p ...

随机推荐

  1. 华为AppCube入选Forrester《中国低代码平台市场分析报告》

    摘要:知名研究与分析机构Forrester于11月11日发布<中国低代码平台市场分析报告(The State Of Low-Code Platforms In China)>,AppCub ...

  2. Seal梁胜:近水楼台先得月,IT人员应充分利用AI解决问题

    2023年9月2日,由平台工程技术社区与数澈软件Seal联合举办的⌈AIGC时代下的平台工程⌋--2023平台工程技术大会在北京圆满收官.吸引了近300名平台工程爱好者现场参会,超过3000名观众在线 ...

  3. 火山引擎DataLeap联合DataFun发布《数据治理知识地图》

    近期,火山引擎DataLeap和技术社区DataFun联合发布<数据治理知识地图专业版V1>(以下简称"地图"),地图将数据治理的领域.流程.技术.工具等内容进行系统化 ...

  4. module 'numpy' has no attribute 'int'.

    原因:np.int 在 NumPy 1.20 中已弃用,在 NumPy 1.24 中已删除 AttributeError: module 'numpy' has no attribute 'int'. ...

  5. PPT 求职应聘:如何利用时间轴去展示

    顺序逻辑的梳理 线条 竖直排列 图形结合

  6. Chrome 英文翻译插件,沙拉查词

    下载: https://pan.baidu.com/s/1VRaZzKgyPKc0Qt6Gufk3yw 提取码: chbm 下载: https://pan.baidu.com/s/1VRaZzKgyP ...

  7. 用 bitsandbytes、4 比特量化和 QLoRA 打造亲民的 LLM

    众所周知,LLM 规模庞大,如果在也能消费类硬件中运行或训练它们将是其亲民化的巨大进步.我们之前撰写的 LLM.int8 博文 展示了我们是如何将 LLM.int8 论文 中的技术通过 bitsand ...

  8. Educational Codeforces Round 92 (Rated for Div. 2) A~C

    原作者为 RioTian@cnblogs, 本作品采用 CC 4.0 BY 进行许可,转载请注明出处. 最近写学习了一下网络爬虫,但昨天晚上的CF让人感觉实力明显退步,又滚回来刷题了QAQ... 比赛 ...

  9. SpringCloud学习 系列十、服务熔断与降级(3-类级别的服务降级)

    系列导航 SpringCloud学习 系列一. 前言-为什么要学习微服务 SpringCloud学习 系列二. 简介 SpringCloud学习 系列三. 创建一个没有使用springCloud的服务 ...

  10. vue 文件路径获取文件名

    例如: url 是//resource//20220819//kfz//调试.zip转换后结果为 调试.zip//文件路径获取文件名 getFileName(url) { let name = &qu ...