安装依赖;
 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. 常用的echo和cat,这次让我折在了特殊字符丢失问题上

    摘要:用过linux的都知道,echo和cat是我们常用的展示内容和写入内容的方式. 本文分享自华为云社区<echo和cat,重定向到文件时,解决特殊字符丢失问题>,作者: 大金(内蒙的) ...

  2. 协同编辑:Google Wave架构分析

    Google Wave的设计初衷是让人们互相发送信息,一起编辑文档,但用户对此感到困惑,很快就以失败告终.Google Wave持续了大约一年时间,于2010年8月被关闭. Wave"领先于 ...

  3. 开心档之MySQL 创建数据库

    MySQL 创建数据库 我们可以在登陆 MySQL 服务后,使用 create 命令创建数据库,语法如下: CREATE DATABASE 数据库名; 以下命令简单的演示了创建数据库的过程,数据名为 ...

  4. Solon Aop 特色开发(4)Bean 扫描的三种方式

    Solon,更小.更快.更自由!本系列专门介绍Solon Aop方面的特色: <Solon Aop 特色开发(1)注入或手动获取配置> <Solon Aop 特色开发(2)注入或手动 ...

  5. 让 ChatGPT 如虎添翼 2.0

    月初写了4个工具,让 ChatGPT 如虎添翼!,时隔二十多天,我又发现了基于ChatGPT的应用,只推最好用的,强烈建议大家都感受一下. 极简搭建 ChatGPT 演示网页 项目地址:https:/ ...

  6. 高数 | Dirichlet 积分

    在分析学中,Dirichlet 积分 是如下形式的 无穷限积分 \[\int_{0}^{+\infty} \frac{\sin x}{x} \mathrm{~d} x \] 它是条件收敛的,且收敛到 ...

  7. 共享内存原理与VCS监控采集实战

    作者:cluo 一.前言 共享内存广泛用于Redis,Kafka,RabbitMQ 等高性能组件中,本文主要提供一个共享内存在广告埋点数据采集的实战场景. 二.共享内存原理 1.原理 在Linux中, ...

  8. idea创建父子项目

    1. 首先创建大的project 父工程:  2. 点击下一步之后: 3. 点击下一步,填写项目存放地址,点击finish: 4. 完成之后删除不需要的文件,保留pom文件,检查对应的jar和spri ...

  9. 绿色数字园区运维:一屏群集 3D 可视化智慧楼宇

    前言 在"新基建"驱动的数字经济热潮下,智慧园区建设发展成为实现园区管理绿色化.现代化.智慧化的核心抓手.通过利用云计算.物联网.大数据等新一代技术手段,充分聚合园区内各类资源,全 ...

  10. GDP折线图

    1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset=" ...