安装依赖;
 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. 性能提升1400+倍,快来看MySQL Volcano模型迭代器的谓词位置优化详解

    摘要:性能提升1400+倍,快来看MySQL Volcano模型迭代器的谓词位置优化详解. 本文分享自华为云社区<华为云数据库内核专家为您揭秘MySQL Volcano模型迭代器性能提升千倍的秘 ...

  2. SBOM:缓解软件供应链风险的关键

    软件包含大量且范围广泛的组件.部分和相互依赖关系.需要有效缓解与使用软件相关的安全风险:需要遵守与组件相关的许可证.通过第三方代码(包括开源软件 (OSS))了解产品中所有项目的出处至关重要,无论这些 ...

  3. Solon Aop 特色开发(3)构建一个Bean的三种方式

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

  4. Kubernetes(K8S) 介绍

    Master Api Server 统一入口,以 Restful 方式,交给 etcd 存储 Scheduler 节点调试,选择 Node 节点,做应用部署 Controller Manager 处理 ...

  5. PMP 如何获取 PDU PMP 证书续证

    PMP 如何获取 PDU. PMP 证书续证  需要准备一张带支付美元的信用卡 打开官网,登录: https://ccrs.pmi.org/   内容随便填 ,可以到 https://pmichina ...

  6. Hugging News #0925: 一览近期的新功能发布

    每一周,我们的同事都会向社区的成员们发布一些关于 Hugging Face 相关的更新,包括我们的产品和平台更新.社区活动.学习资源和内容更新.开源库和模型更新等,我们将其称之为「Hugging Ne ...

  7. 手把手教你配置JupyterLab 环境

    Python 代码编辑器怎么选?PyCharm.VS Code.Jupyter Notebook 都各有特色. 对于大型代码库,最好还是用传统的 IDE 比较靠谱,但是数据分析等需要可视化操作的场景下 ...

  8. 【django-vue】登录、注册前端实现 redis介绍 redis安装 python操作redis redis连接池 Redis之字符串类型

    目录 上节回顾 今日内容 1 登录前台 多方式登录 短信登录 Login.vue 2 注册前台 注册功能 Header.vue 3 redis介绍 3.1 redis应用场景 3.2 redis安装 ...

  9. sort与uniq

    1 sort 将文本文件内容加以排序 语法: sort [-bcdfimMnr][-o<输出文件>][-t<分隔字符>][+<起始栏位>-<结束栏位>] ...

  10. BAPI_PO_CHANGE 采购订单修改服务

    修改服务页签里面的价格和数量,达到修改净价和条件里面金额的目的 数据可以通过采购订单查询ESLH和ESLL表获取 "------------------------------------- ...