webpack配置sass模块的加载的方法

2026-04-21 20:07:30

webpack管理的项目，我们希望用sass定义样式，为了正常编译，需要做如下配置。这里不讲webpack的入门，入门的文章，我推荐这篇《webpack入门》。

为了使用sass，我们需要安装sass的依赖包

//在项目下，运行下列命令行
npm install --save-dev sass-loader
//因为sass-loader依赖于node-sass，所以还要安装node-sass
npm install --save-dev node-sass

当然了，使用样式的话，css-loader和style-loader也是必须的依赖包，如果没有安装，可以类似上述的方法安装

css-loader使你能够使用类似@import 和 url(…)的方法实现 require()的功能；
style-loader将所有的计算后的样式加入页面中；

二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。

下面是webpack.config.js文件的部分配置：

var ExtractTextPlugin = require('extract-text-webpack-plugin');//css样式从js文件中分离出来,需要通过命令行安装 extract-text-webpack-plugin依赖包
module.exports = {
 ....
 module: {
  loaders: [
   //解析.css文件
   {
    test: /\.css$/,
    loader: ExtractTextPlugin.extract("style", 'css')
   },
   //解析.vue文件
   {
    test: /\.vue$/,
    loader: 'vue'
   },
   //解析.scss文件,对于用 import 或 require 引入的sass文件进行加载，以及<style lang="sass">...</style>声明的内部样式进行加载
   {
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract("style", 'css!sass') //这里用了样式分离出来的插件，如果不想分离出来，可以直接这样写 loader:'style!css!sass'
   }
  ]
 },
 //.vue文件的配置，以下是为了在.vue文件中使用ES6语法（必须安装babel相关的依赖包），以及把使用css或sass语法的样式提取出来，如果不需要可以忽略
 vue: {
  loaders: {
   js: 'babel',
   css: ExtractTextPlugin.extract("css"),
   sass: ExtractTextPlugin.extract("css!sass")
  },
 },
 plugins: [
  new ExtractTextPlugin("style.css") //提取出来的样式放在style.css文件中
 ]
 ....
}

sass的使用如下，例如：

引入外部样式，下面两种写法都可以使用：

import '../../css/test.scss'
require('../../css/test2.scss');

在.vue文件中使用

<style lang="sass">
  //sass语法样式
</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

关于webpack2和模块打包的新手指南（小结）

webpack已成为现代Web开发中最重要的工具之一.它是一个用于JavaScript的模块打包工具,但是它也可以转换所有的前端资源,例如HTML和CSS,甚至是图片.它可以让你更好地控制应用程序所产生的HTTP请求数量.允许你使用其他资源的特性(例如Jade.Sass和ES6).webpack还可以让你轻松地从npm下载包. 本文主要针对那些刚接触webpack的同学,将介绍初始设置和配置.模块.加载器.插件.代码分割和热模块替换. 在继续学习下面的内容之前需要确保你的电脑中已经安装了Node
详解用webpack把我们的业务模块分开打包的方法

webpack我自己还在摸索学习中,今天给大家分享个用webpack把我们的业务模块分开打包的方法,顺便留个笔记如何用webpack打包这3个js? 只需修改webpack的配置文件webpack.config.js: // entry是入口文件,可以多个,代表要编译那些js entry:['./src/main.js','./src/login.js','./src/reg.js'], 这样就可以全部打包,最终生成./build/js/build.js 1,那么如果我们想最后生成不同的文件,
详解react-webpack2-热模块替换[HMR]

本文介绍了react-webpack2-热模块替换[HMR],分享给大家,具体如下: 模块热替换功能会在应用程序运行过程中替换.添加或删除模块,而无需重新加载页面.这使得你可以在独立模块变更后,无需刷新整个页面,就可以更新这些模块,极大地加速了开发时间. babel 配置需要先下载 npm install --save-dev react-hot-loader@3.0.0-beta.6 然后在 .babelrc 中配置 { "presets": [ ["es2015&quo
Webpack常见静态资源处理-模块加载器（Loaders）+ExtractTextPlugin插件

webpack系列目录 webpack 系列二:webpack 介绍&安装 webpack 系列三:webpack 如何集成第三方js库 webpack 系列四:webpack 多页面支持 & 公共组件单独打包 webpack 系列五:webpack Loaders 模块加载器 webpack 系列六:前端项目模板-webpack+gulp实现自动构建部署基于webpack搭建纯静态页面型前端工程解决方案模板, 最终形态源码见github: https://github.com
探索webpack模块及webpack3新特性

本文从简单的例子入手,从打包文件去分析以下三个问题:webpack打包文件是怎样的?如何做到兼容各大模块化方案的?webpack3带来的新特性又是什么? 一个简单的例子 webpack配置 // webpack.config.js module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, }; 简单的js文件 // sr
jQuery 移动端拖拽（模块化开发，触摸事件，webpack）

通过jquery可以很容易实现CP端的拖拽.但是在移动端却不好用了.于是我自己写了一个在移动端的拖拽demo,主要用到的事件是触摸事件(touchstart,touchmove和touchend). 这个demo实现的功能是:可以拖拽的元素(在这里是图片)位于列表中,这些元素可以被拖到指定区域,到达指定区域(控制台)后,元素被插入控制台后,原来的拖动元素返回原位置,新的元素依然可以在控制台中拖动,也能拖出控制台. 在这个demo中一个用三个模块,分别为ajax模块,drag模块,position
webpack配置sass模块的加载的方法

webpack管理的项目,我们希望用sass定义样式,为了正常编译,需要做如下配置.这里不讲webpack的入门,入门的文章,我推荐这篇<webpack入门>. 为了使用sass,我们需要安装sass的依赖包 //在项目下,运行下列命令行 npm install --save-dev sass-loader //因为sass-loader依赖于node-sass,所以还要安装node-sass npm install --save-dev node-sass 当然了,使用样式的话,css-lo
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法

本文实例讲述了AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法.分享给大家供大家参考,具体如下: 接着前面那篇<AngularJS使用ng-app自动加载bootstrap框架问题分析>,现在我们看下如何使用带属性值的ng-app命令,让ng-app自动加载我们自定义的模块作为根模块. <!DOCTYPE html> <html> <head> <script src="angular.js">&l
AngularJS使用angular.bootstrap完成模块手动加载的方法分析

本文实例分析了AngularJS使用angular.bootstrap完成模块手动加载的方法.分享给大家供大家参考,具体如下: 之前我们看到使用ng-app指令,可以实现模块的自动加载.现在我们看下,angular中如何手动加载模块.需要使用到angular.bootstrap这个函数. <html> <head> <script src="angular.js"></script> <script> // 创建moudle1
webpack是如何实现模块化加载的方法

webpack支持的模块规范有 AMD.CommonJS.ES2015 import等规范.不管何种规范大致可以分为同步加载和异步加载两种情况.本文将介绍webpack是如何实现模块管理和加载. 同步加载如下: import a from './a'; console.log(a); 异步加载如下: import('./a').then(a => console.log(a)); webpacks实现的启动函数,直接将入口程序module传入启动函数内,并缓存在闭包内,如下: (function
浅谈Angular2 模块懒加载的方法

当项目变得复杂庞大以后,如果所有页面都在一个模块里,就会出现首页加载慢的问题,因为首页就已经把整个项目加载进来了.所以,很有必要根据业务将不同的功能分模块,以便Angular2按需加载,提升用户体验. 下面的例子是将首页放到home模块里,访问/home时加载home模块内容,仅供学习懒加载,其实首页访问路径应该是/ 先看项目文件结构: home模块放到src/app/home目录下,里面的home目录是home组件. home模块有单独的定义和路由(home.module.ts,home-ro
webpack打包并将文件加载到指定的位置方法

使用webpack打包,最爽的事情莫过于可以直接require文件了,但是这同时带来了一个问题,就是所有的文件整合到一起,那这一个包就太大了. 基于此:下面我们来了解下webpack的打包(主要是将如何将我们需要的内容模块,分开打包, 并且按照我们自己设定的存放路径进行存放) 首先在webpack.config.js文件中 entry入口函数出表示出哪些是需要单独打包成一个js包的: entry: { main: path.resolve(__dirname,'src/index.js'),
react-router4 配合webpack require.ensure 实现异步加载的示例

实现异步加载的方法,归根结底大都是根据webpack的require.ensure来实现第一个是自己使用require.ensure实现, 第二种使用loader实现今天我们说的是使用bundle-loader来实现,这样代码更优雅些. 首先需要安装bundle-loader ,具体使用npm还是yarn,就看你的包管理使用的是啥了. 下面需要一个bundle.js import React, { Component } from 'react'; export default class
vue+webpack实现异步组件加载的方法

8.9更新:之前想搬迁到csdn的时候由于邀请码问题迟迟没把博客转过来,所以跑去博客园了,今天发现csdn已经帮我把文章搬过来,有必要修正一下这篇文章. 写这篇文章的时候因为刚接触vue,所以捣鼓的时候有些迷糊. ----------------/*以下可以跳过*/----------------- 本来很简单的事情折腾好久. 1.vue文档只给出了Vue.component('comp_name',function(resolve,reject){})在回调里ajax加载组件定义内容的例子,但
Python pkg_resources模块动态加载插件实例分析

使用标准库importlib的import_module()函数.django的import_string(),它们都可以动态加载指定的 Python 模块. 举两个动态加载例子: 举例一: 在你项目中有个test函数,位于your_project/demo/test.py中,那么你可以使用import_module来动态加载并调用这个函数而不需要在使用的地方通过import导入. module_path = 'your_project/demo' module = import_module(
JavaScript 模块的循环加载实现方法

"循环加载"(circular dependency)指的是,a脚本的执行依赖b脚本,而b脚本的执行又依赖a脚本. // a.js var b = require('b'); // b.js var a = require('a'); 通常,"循环加载"表示存在强耦合,如果处理不好,还可能导致递归加载,使得程序无法执行,因此应该避免出现. 但是实际上,这是很难避免的,尤其是依赖关系复杂的大项目,很容易出现a依赖b,b依赖c,c又依赖a这样的情况.这意味着,模块加载机

webpack配置sass模块的加载的方法

相关推荐

随机推荐