安装依赖;
 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. 利用Appuploader上架IPA步骤

      Appuploader可以辅助在Windows.linux或mac系统直接申请iOS证书p12,及上传ipa到App Store.方便在没有苹果电脑情况下上架IPA操作. 一.下载安装iOS上架辅 ...

  2. 火山引擎 DataTester:“在字节,A/B 实验是一种信仰”

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,并进入官方交流群 进入数字经济时代,要用数据驱动业务增长已经成为各个行业的共识,但很多企业还没能真正掌握这项能力.如何最大限度转化数据价值, ...

  3. Axure 形状交互

  4. Oracle 删除唯一约束

    1.查出有哪些约束 SELECT CONSTRAINT_NAME,CONSTRAINT_TYPE,STATUS FROM USER_CONSTRAINTS WHERE TABLE_NAME ='D_D ...

  5. 本地安装mysql (zip)

    下载 https://downloads.mysql.com/archives/community/ 解压到文件夹且添加系统环境变量 C:\Dinstall\Dmysql\mysql-8.2.0-wi ...

  6. 初识Selenium自动化(为什么要去用自动化?)

    什么是自动化测试 让程序代替人去验证程序功能的过程 自动化测试就是把以人为驱动的测试行为转化为机器执行的一种过程 比如说:我们设计好执行脚本,通过驱动连接浏览器去模拟人去操作浏览器一般 为什么要进行自 ...

  7. 机器人多目标包围问题(MECA)新算法:基于关系图深度强化学习

    摘要:中科院自动化所蒲志强教授团队,提出一种基于关系图的深度强化学习方法,应用于多目标避碰包围问题(MECA),使用NOKOV度量动作捕捉系统获取多机器人位置信息,验证了方法的有效性和适应性.研究成果 ...

  8. 100天搞定机器学习|Day60 遇事不决,XGBoost

    XGBoost 是一种集大成的机器学习算法,可用于回归,分类和排序等各种问题,在机器学习大赛及工业领域被广泛应用.成功案例包括:网页文本分类.顾客行为预测.情感挖掘.广告点击率预测.恶意软件分类.物品 ...

  9. C++20 | std::span 陣列、容器的代理人

    在 C++ 裡頭有相當多「容器」.從原生的陣列,到標準庫 STL 的 vector, array, list, queue, map, set, -.有時候我們只是想以檢視的角度去看一個容器,或是其中 ...

  10. 什么是全同态加密(FHE)中的自举(Bootstrapping)?

    PrimiHub一款由密码学专家团队打造的开源隐私计算平台,专注于分享数据安全.密码学.联邦学习.同态加密等隐私计算领域的技术和内容. 全同态加密(Fully Homomorphic Encrypti ...