css加载器文件通常和extract-text-webpack-plugin一块使用,我们可以在源文件src目录下写scss文件,然后通过webpack编译成css文件到输出目录public,这个目录就是我们网站需要引用的目录.

  1. var webpack = require('webpack');
  2. var HtmlWebpackPlugin = require('html-webpack-plugin');
  3. var ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
  4. var extractCss = new ExtractTextWebpackPlugin("css/[name].css");//这里的参数是配置编译后的css路径和文件名,相对于output里的path选项
  5. var path = require('path');
  6. module.exports = {
  7. resolve:{
  8. extentions:["",".scss"]
  9. },
  10. entry:{
  11. main:__dirname + '/app/main.js',
  12. index:__dirname + '/app/index.js'
  13. },
  14. output:{
  15. path:__dirname + '/public', //通过HtmlWebpackPlugin插件生成的html文件存放在这个目录下面
  16. filename:'/js/[name].js', //编译生成的js文件存放到根目录下面的js目录下面,如果js目录不存在则自动创建
  17. },
  18. module:{
  19. loaders:[
  20. {test:/\.scss$/,loader:extractCss.extract(['css','sass'])}
  21. ]
  22. },
  23. sassLoader:{
  24. includePaths:[path.resolve(__dirname,'./app/css')]
  25. },
  26. plugins:[
  27. new HtmlWebpackPlugin({title:'custom title2',template:__dirname + '/public/tempIndex.html'}),
  28. extractCss
  29. ]
  30. }

Note:new ExtractTextWebpackPlugin("css/[name].css"),如果用了[name]占位符的形式,只编译引用了scss文件的入口文件,且生成的css文件名与入口文件对应。

如果有多个入口文件都引入了同一个scss文件,且entry属性配置了vendor对象,则生成一个vendor.css文件,这个vendor.css文件对应的源码是入口文件共同引用的scss文件(webpack.optimize.CommonsChunkPlugin不仅能提取公共的js文件还能提取公共的css文件),如果没有配置vendor则分别生成多个与入口文件同名的css文件。

如果多个入口文件引用的是不同的scss文件,不管entry属性有没有配置vendor对象,都生成多个与入口文件对应的同名css文件。

通常情况下都会使用[name]占位符,如果只有一个入口节点引用了scss文件且只引用了一个scss文件,则可以不用占位符,可以指定任意名称。

关于webpack编译scss文件的更多相关文章

  1. Compass 编译.scss文件的问题

    compass 命令编译scss文件存在一个问题: 不能对"_"下划线开头的scss文件名称的文件进行编译.将"_"去掉就可以啦

  2. 让webStorm支持自动监听编译scss文件

    前提概要 今日,重装了两波系统,,,之前安装的各种环境都忘光了,重新又踩一次坑的感觉很不舒服,所以记录一下配置自动编译scss一路遇到的坑 一.webstrom run的时候控制台输出的错误中文提示乱 ...

  3. koala编译scss文件时不支持中文字体的解决方案

    第一种方案:在scss文件第一行加上这行代码@charset "utf-8"; 第二种方案: scss文件编译时候使用ruby环境,出现 Syntax error: Invalid ...

  4. 在sublime text3中安装sass编译scss文件

    一 搭建环境 首先安装ruby环境,不然会编译失败,在这里下载ruby ,安装的时候选择第二项 在cmd中输入gem -v 显示版本号说明ruby安装成功 待ruby安装成功后,在cmd中输入 gem ...

  5. webpack 编译图片文件 file-loader

    1.安装插件 npm i file-loader --save-dev  npm i url-loader --save-dev  npm install image-webpack-loader - ...

  6. webpack 编译模板文件

    1.项目结构 安装loader: npm i html-loader --save-dev npm i ejs-loader --save-dev 2.模板文件layer.tpl <div cl ...

  7. webpack实现scss编译配置

    1.webpack.start.js: var webpack = require('webpack'); var SpritesmithPlugin = require('webpack-sprit ...

  8. webpack单独构建scss文件与.vue组件里构建scss的一个坑

    在入口main.js里构建scss是通过引入模块的方式 import './assets/_reset.scss'; import './assets/_flex.scss'; import './a ...

  9. webpack打包处理html、css、js、img、scss文件

    webpack --help 查看webpack命令启动服务 npm run dev (先配置好服务)进入对应文件夹并初始化npmcd demo npm init 安装webpack npm inst ...

随机推荐

  1. 从零开始学Python06作业源码(仅供参考)

    Python Version 2.7x 一,bin目录:程序启动入口 SelectLesson_start.py #!usr/bin/env python # -*- coding:utf-8 -*- ...

  2. 常用C#关键字详解教程

    很多在学习网站后台的同学都对C#的关键字有些摸不到头脑,现在就和大家一起学习一下这些关键字的含义 类型 Void 用作方法的返回类型时,void 关键字指定方法不返回值. 在方法的参数列表中不允许使用 ...

  3. HTTP 协议整理(转)

    HTTP 协议 作为web开发人员,了解一些http协议的知识很有必要.本文简单介绍了HTTP协议的知识,若有错误的地方,望大家斧正. 1.HTTP协议是什么? http协议是一个应用层的协议.规定了 ...

  4. c/C++二进制运算符

    c/c++中常用的二进制运算符有六个.这里对这六个做简单的介绍和应用举例. 1.  &  :  与操作.作用于两个二进制数,当然也可以对整型数据进行操作(当两边为整型数据会自动转化为二进制数) ...

  5. iOS BUG: Unbalanced calls to begin/end appearance transitions for <XXXViewController: 0x7fcea3730650>.

    自定义TabBarController Push下一级Controller时 会报这样的错误:Unbalanced calls to begin/end appearance transitions ...

  6. 时空地图 TimeGIS.com 中生成等值线

    在我的地图软件TimeGIS中加入了等值线生成的功能: 等值线的生成使用了wCoutour库, 代码根据这里的例子修改,http://www.06climate.com/view/1244.html ...

  7. GitHub学习心得之 分支操作

    目录 前言 1. 一般的push和pull 2. 分支操作 前言 本文对Github的分支操作进行了总结, 主要基于以下文章: http://blog.csdn.net/guang11cheng/ar ...

  8. 视图xsl定制之嵌入服务器控件

    SharePoint 2010 视图 xsl 文件中支持嵌入服务器控件,嵌入服务器控件时,系统先采用xsl将视图xml解析成一个类似UserControl的存在,然后执行UserControl. 代码 ...

  9. Android AsyncTask 深度理解、简单封装、任务队列分析、自定义线程池

    前言:由于最近在做SDK的功能,需要设计线程池.看了很多资料不知道从何开始着手,突然发现了AsyncTask有对线程池的封装,so,就拿它开刀,本文将从AsyncTask的基本用法,到简单的封装,再到 ...

  10. IOS开发基础知识--碎片32

    1:动画属性UIViewAnimationOptions说明 a:常规动画属性设置(可以同时选择多个进行设置) UIViewAnimationOptionLayoutSubviews:动画过程中保证子 ...