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. java计算器 图形用户界面 升级版 v1.02

    package com.rgy.entity; import java.awt.BorderLayout; import java.awt.Font; import java.awt.GridLayo ...

  2. Legal or Not（模板题）

    本来以为这题能用并查集做的,但一想不对 例如A-> B,A->C如果用并查集的话B与C就不能连了,但实际B可以是C的徒弟,所以这题是考拓扑排序. #include<stdio.h&g ...

  3. [LeetCode] 200. Number of Islands_ Medium tag: BFS

    Given a 2d grid map of '1's (land) and '0's (water), count the number of islands. An island is surro ...

  4. python写http post请求的四种请求体

      Web自动化测试(25)  HTTP 协议规定 POST 提交的数据必须放在消息主体(entity-body)中,但协议并没有规定数据必须使用什么编码方式.常见的四种编码方式如下: 1.appli ...

  5. STA分析(五) parastics

    互联线的寄生参数 一般一个cell或者block的连接pin就叫做一个net.在物理实现的时候,一条net可能会穿过几层metal,因为每个metal层的电阻,电容值都不一样.所以,在分析 net的寄 ...

  6. 《Bilateral Multi-Perspective Matching for Natural Language Sentences》（句子匹配）

    问题: Natural language sentence matching (NLSM),自然语言句子匹配,是指比较两个句子并判断句子间关系,是许多任务的一项基本技术.针对NLSM任务,目前有两种流 ...

  7. 27. Remove Element(双指针)

      Given an array nums and a value val, remove all instances of that value in-place and return the ne ...

  8. 20155239 2016-2017-2 《Java程序设计》第5周学习总结

    教材内容学习 第八章 JAVA异常架构 Java异常是Java提供的一种识别及响应错误的一致性机制. Java异常机制可以使程序中异常处理代码和正常业务代码分离,保证程序代码更加优雅,并提高程序健壮性 ...

  9. Python-sys模块，异常

    习题1:题目:给一个不多于5位的正整数,要求:一.求它是几位数,二.逆序打印出各位数字. #encoding=utf-8 while True: try: num=int(raw_input(&quo ...

  10. Windows10 64位下安装TensorFlow谷歌人工智能系统已官方原生支持

    Windows10 64位下安装TensorFlow谷歌人工智能系统已官方原生支持 GitHub - tensorflow/tensorflow: Computation using data flo ...