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. Ajax返回乱码

    1.关于JSP页面中的pageEncoding和contentType两种属性的区别: pageEncoding是jsp文件本身的编码,contentType的charset是指服务器发送给客户端时的 ...

  2. Linux Packages Search

    网站 : https://www.pkgs.org/ https://centos.pkgs.org/

  3. Haproxy启动故障：Starting proxy:cannot bind socke

    Haproxy启动时提示失败: [ALERT] 146/132210 (3443) : Starting frontend Redis: cannot bind socket [0.0.0.0:637 ...

  4. 从游戏开发到web前端——仅仅只是开始

    文章开头,请允许我随便扯扯. 一来,开头从来都是最难写的,二来,描述我现在的心情和状态以及工作背景啥的,对于大家理解后面的内容也许会有所帮助~ 2012年211大学毕业,工作4年了,一直都是做游戏前端 ...

  5. uva1201 DAG 最小路径覆盖，转化为 二分图

    大白例题P356 你在一座城市里负责一个大型活动的接待工作.你需要去送m个人从出发地到目的地,已知每个人的出发时间出发地点,和目的地点,你的任务是用尽量少的出租车送他们,使得每次出租车接客人,至少能提 ...

  6. MySQL从删库到跑路_高级（四）——存储过程

    作者:天山老妖S 链接:http://blog.51cto.com/9291927 一.存储过程简介 1.存储过程简介 存储过程是一组具有特定功能的SQl语句集组成的可编程的函数,经编译创建并保存在数 ...

  7. Java求解迷宫问题：栈与回溯算法

    摘要: 使用栈的数据结构及相应的回溯算法实现迷宫创建及求解,带点JavaGUI 的基础知识. 难度: 中级 迷宫问题是栈的典型应用,栈通常也与回溯算法连用. 回溯算法的基本描述是: (1)  选择一个 ...

  8. Python: 合并拼接字符串join(）| format() | +

    将几个小字符串合并成为一个大的字符串 1如果合并的是一个序列,最快的方式是使用join()方法 >>> parts = ['Is', 'Chicago', 'Not', 'Chica ...

  9. linux常用命令：find 命令参数详解

    find一些常用参数的一些常用实例和一些具体用法和注意事项. 1．使用name选项: 文件名选项是find命令最常用的选项,要么单独使用该选项,要么和其他选项一起使用.  可以使用某种文件名模式来匹配 ...

  10. 好用的firefox浏览器、geckodriver驱动的版本组合（55 和 0.19.1）

    试过很多的firefox浏览器版本和geckodriver的组合,有时候好用,有时候不好用,现在确定了一个好用的版本组合,记录一下: firefox:版本55,而且此版本可以用firebug geck ...