cnpm install css-loader --save-dev    //css-loader 是将css打包进js

cnpm install style-loader --save-dev  //style-loader 将css通过require方式引入进来

cnpm install sass-loader node-sass  --save-dev //同时安装sass 和sass-loader

cnpm install extract-text-webpack-plugin --save-dev //把css从js中提取出来

以下实现的效果是将sass打入js的同时也将其从中提取出来

目录结构（publi为src编译生成的文件）

html

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

    </head>

<link rel="stylesheet" type="text/css" href="public/css/index.css" />

    <body>

            <div id="app">6r</div>

            <p id="demo">456</p>

    </body>

    <script type="text/javascript" src="public/js/index.js"></script>

     <!-- assets是通过publicPath虚构出来的暂存空间，它不直接在硬盘内存中，通过webpack-dev-server来运行 -->

</html>

index.scss

$col:pink;

@import "./demo"; //导入css

body{

 font-size: 900%;

  #app{color:$col;}

}

demo.css

  #demo{color:blue;}

index.js

var $ = require('../../node_modules/jquery');

//loader-css

require("../css/index.scss"); 

$('#app').html("1334");

$("#app").click(function(event){

        alert(123)

    });

 webpack.config.js 

var webpack = require("webpack");

var webpckDevServer  = require("webpack-dev-server");

var ExtractTextPlugin = require('extract-text-webpack-plugin');//抽离css插件

var extractCss = new ExtractTextPlugin("css/index.css");//实例化，并并填写输出的一个路径[]中表示输出默认名称,这个目录相对于提出的那个目录

module.exports={

    entry: __dirname +"/src/js/index.js",//入口文件 webpack-dev-server 实时刷新监控的目录

    output:{

        path: __dirname +"/public/", 

        filename: "js/index.js",

        publicPath: '/assets/'//打开webpack-dev-server 服务器工具时可以再index里面引用此地址，打开速度会快一点,另外他不是直接在内存中存放而是先在webpack的虚拟内存中暂存,所以在webpack未编译之前能够运行，如果直接写实体目录则不经过webpack打包编译，浏览器是识别不了的，所以先放在这个虚拟目录里，因为是虚拟目录，所以你看不到他的编译文件

    },

    devServer:{

        contentBase:"./",//根目录

        host:'192.168.199.171',//ip设置 要相对的进行改变

        port:"80",//端口

        colors:true,

        open:true//自动打开浏览器

    },

    module:{

        loaders:[

            {  test:/\.css$/,//匹配.css文件

               loader : ExtractTextPlugin.extract("style-loader", "css-loader")

            },

             {

                test: /\.scss$/,

                loader: ExtractTextPlugin.extract("style-loader", "css!sass")            }

        ]

    },

    plugins:[

           extractCss

    ]

}

package.json

{

  "name": "webp2",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "www": "cnpm run demo && cnpm run devServer",

    "demo": "webpack --watch --progress -d -p --color",

    "demo2": "webpack --config webpack.config123.js --watch --progress -d -p --color",

    "start": "webpack --watch --progress -d -p --color",

    "devServer": "webpack-dev-server --inline --hot"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "css-loader": "^0.26.1",

    "extract-text-webpack-plugin": "^1.0.1",

    "jquery": "^3.1.1",

    "node-sass": "^4.0.0",

    "sass-loader": "^4.1.0",

    "style-loader": "^0.13.1",

    "webpack": "^1.14.0",

    "webpack-dev-server": "^1.16.2"

  }

}

2、extract-text-webpack-plugin提取Sass编译的Css的更多相关文章

  1. 1、webpack编译打包Sass编译的css进js文件

    cnpm install css-loader --save-dev    //css-loader 是将css打包进js cnpm install style-loader --save-dev   ...

  2. Sublime插件支持Sass编译和Babel解析ES6 & .sublime-build文件初探

    用Sublime Text蛮久了,配置配来配去的,每次换电脑都得重头再配过,奈何人老了脑子不中用了,得好好整理一些,下次换电脑就有得参考了.. 同事说,他的WebStorm简直太方便,自身集成了很多方 ...

  3. Sublime插件支持Sass编译和Babel解析ES6 & .sublime-build文件初探（转载自imwtr）

    原文请看:http://www.cnblogs.com/imwtr/p/6010550.html   用Sublime Text蛮久了,配置配来配去的,每次换电脑都得重头再配过,奈何人老了脑子不中用了 ...

  4. sublime中编译的sass如何改变css输出风格？【这里有答案】

    由于在网上找了一遍没找到如果在sublime中将sass编译的css转换成为自己喜欢的风格,所以换了一种思路搜索到了答案,这里我将讲述如果更改. 首先sass总共有四种编译风格 (1) nested( ...

  5. sass安装：webpack sass编译失败，node-sass安装失败的终极解决方

    文章来源:sass安装:webpack sass编译失败,node-sass安装失败的终极解决方 sass难言之隐-sass安装的坑 之前花了很多时间折腾node-sass,发现sass老是安装不上 ...

  6. react看这篇就够了（react+webpack+redux+reactRouter+sass）

    本帖将对一下内容进行分享: 1.webpack环境搭建: 2.如何使用react-router: 3.引入sass预编译: 4.react 性能优化方案: 5.redux结合react使用: 6.fe ...

  7. sass编译

    sass编译 命令行编译 单文件转换命令 sass style.scss style.css 单文件监听命令 sass --watch style.scss:style.css 文件夹监听命令 sas ...

  8. 如何开发webpack plugin

    继上回介绍了如何开发webpack loader 之后.趁热打铁,来继续看下webpack另一个核心组成:plugin. 下面也和loader一样,让我们一起从基本的官方文档着手看起. loader和 ...

  9. 简单webpack plugin 开发

    重要是学习下怎么开发webpack plugin,同时记录下 插件模型 webpack 是一个插件,可以是javascript class ,或者具名 class 定义apply 方法 指定一个绑定到 ...

随机推荐

  1. eclipse spket插件 错误 Syntax error on token "(", FunctionExpressionHeader expected after this

    在myEclipse抵抗了两个小时后,终于被spket插件搞上了.其实上学期自己也学过Ext.js,哈哈..慕名而来的. 但当时功力不足,不得以要停止修炼.可现在不同,java的基础和j2ee的ssh ...

  2. Dubbo简单环境搭建

    Dubbo服务的发展和作用: 首先,看下一般网站架构随着业务的发展,逻辑越来越复杂,数据量越来越大,交互越来越多之后的常规方案演进历程. 其次,当服务越来越多之后,我们需要做哪些服务治理? 最后,是d ...

  3. spring boot读取配置文件

    一.springboot配置文件 核心配置文件和自定义配置文件.核心配置文件是指在resources根目录下的application.properties或application.yml配置文     ...

  4. [py]python自省工具

    参考 在日常生活中,自省(introspection)是一种自我检查行为.自省是指对某人自身思想.情绪.动机和行为的检查.伟大的哲学家苏格拉底将生命中的大部分时间用于自我检查,并鼓励他的雅典朋友们也这 ...

  5. HTML输入框的默认显示内容

    在某些情况下我们会需要在输入框里默认显示一些内容,比如在登录的时候不在输入框前面显示用户名和密码,直接在输入框里显示,这时只要在input的标签里添加属性  placeholder="用户名 ...

  6. [转]一步一步玩控件：自定义TabControl——从山寨Safari开始

    作者:野比 (conmajia@gmail.com) 时间:May, 2012 封面图片为野比原创,请勿未经允许私自引用 #1-1 嗯,各位,又是我,生物钟颠倒的家伙. 今天我要山寨的是大名鼎鼎的Ap ...

  7. MySQL个人学习笔记

    目录: 数据库的基本操作 创建.删除用户及授权 数据库字符校对集 创建.删除数据库和表 DML操作 DDL操作 索引 事务 一.数据库的基本操作 -- 选择要操作的数据库 -- world:数据库名 ...

  8. 《ABCNN: Attention-Based Convolutional Neural Network for Modeling Sentence Pairs》

    代码: keras:https://github.com/phdowling/abcnn-keras tf:https://github.com/galsang/ABCNN 本文是Wenpeng Yi ...

  9. Java实现递归将嵌套Map里的字段名由驼峰转为下划线

    摘要: 使用Java语言递归地将Map里的字段名由驼峰转下划线.通过此例可以学习如何递归地解析任意嵌套的List-Map容器结构. 难度:初级 概述 在进行多语言混合编程时,由于编程规范的不同, 有时 ...

  10. jquery easyUI相关

    jquery easyUI相关===================================easyUI表单验证处理//jquery easyUI 表单验证不通过让光标定位在第一个未通过验证的 ...