安装依赖;
 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. 云图说:云数据库 RDS for MySQL一键开通读写分离,轻松应对业务高峰期

    摘要:华为云数据库 RDS for MySQL提供一键开通读写分离功能,只需要一个连接地址,让您在业务高峰期不再迷茫,不再慌乱,so easy 的应对业务. 本文分享自华为云社区<云图说 | 第 ...

  2. TS数据类型:从C++/Java/Python到TS看元组tuple—元组的来龙去脉

    在C++有Java这种强类型语言中,常用的Array.List.Set ,在集合中只能是一种类型(可以复习下:<再谈Java数据结构-分析底层实现与应用注意事项). int data[] = n ...

  3. 火山引擎 DataLeap 构建Data Catalog系统的实践(二):技术与产品概览

    技术与产品概览 架构设计 元数据的接入 元数据接入支持T+1和近实时两种方式 上游系统:包括各类存储系统(比如Hive. Clickhouse等)和业务系统(比如数据开发平台.数据质量平台等) 中间层 ...

  4. 第一章 Linux系统编程

    Linux基础命令 ctrl + l //快速清屏 rm 文件名 //删除文件,rm *.o表示删除所有.o后缀的文件 mkdir 目录名 //创建一个目录 touch 文件名 //创建一个文件 tr ...

  5. 广州|阿里云 Serverless 技术实战营邀你来玩!

    活动简介 "Serverless 技术实战与创新沙龙 " 是一场以 Serverless 为主题的开发者活动,活动受众以关注Serverless 技术的开发者.企业决策人.云原生领 ...

  6. vue中引入其他网站页面

    https://blog.csdn.net/qq_36706878/article/details/102593309

  7. P1064-DP【绿】

    好多好多天前写了这道题的50分代码,然后不知道错在哪里反复调没调对.然后这周我极度忙,忙死了,好不容易有一点时间再来审视这道题了,然后我5分钟想明白了一切...意识到自己此前的错误有多弱智... 把D ...

  8. Python异步编程原理篇之协程的IO

    协程的IO asyncio 作为实现异步编程的库,任务执行中遇到系统IO的时能够自动切换到其他任务.协程使用的IO模型是IO多路复用.在 asyncio 低阶API 一篇中提到过 "以Lin ...

  9. paddlespeech asr脚本demo

    概述 paddlespeech是百度飞桨平台的开源工具包,主要用于语音和音频的分析处理,其中包含多个可选模型,提供语音识别.语音合成.说话人验证.关键词识别.音频分类和语音翻译等功能. 本文介绍利用p ...

  10. 小白学标准库之 log

    日常开发中,日志 log 几乎是必不可少.本文旨在介绍 log 的使用和内部实现等. 1. log 使用及实现 package main import ( "fmt" " ...