搭建css module和cssnext自动刷新开发环境_html/css

搭建css module和cssnext自动刷新开发环境_html/css_WEB-ITnose

WBOY

Release： 2016-06-21 08:53:37

Original

1306 people have browsed it

先看这张图

实在太爽了，支持css module，保存还自动刷新，很好的开发环境，这个项目来自于 ultimate-hot-reloading-example

用法很简单，在命令行输入

git clone https://github.com/glenjamin/ultimate-hot-reloading-examplecd ultimate-hot-reloading-examplenpm inpm start

Copy after login

浏览器打开 http://localhost:3000/ 就可以看到效果了。

用编辑器打开，修改 client\components\App.css 文件，�样式会实时刷新。

修改 client\components\App.js 文件，结构是写在js里的，修改结构也能实时刷新。

但是一些css3属性没有加前缀，我们还需要cssnext-loader

在命令行输入

npm install cssnext-loader --save-dev

Copy after login

然后修改 webpack.config.js 文件

var path = require('path');var webpack = require('webpack');module.exports = {  devtool: '#eval-source-map',  entry: [    'webpack-hot-middleware/client',    './client/app.js'  ],  output: {    path: __dirname,    filename: 'bundle.js',    publicPath: '/'  },  cssnext: {    browsers: "last 10 versions",  },  plugins: [    new webpack.optimize.OccurenceOrderPlugin(),    new webpack.HotModuleReplacementPlugin(),    new webpack.NoErrorsPlugin()  ],  resolve: {    extensions: ['', '.js'],    alias: {      request: 'browser-request'    }  },  module: {    loaders: [    // Javascript    {      test: /\.js$/,      loader: 'babel',      include: path.join(__dirname, 'client'),      query: {        optional: ['runtime'],        plugins: [          'react-display-name',          'react-transform'        ],        extra: {          'react-transform': {            'transforms': [{              'transform': 'react-transform-hmr',              'imports': ['react'],              'locals': ['module']            }]          }        }      }    },    // CSS    {      test: /\.css$/,      include: path.join(__dirname, 'client'),      loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[path][name]-[local]!cssnext-loader'    }    ]  }};

Copy after login

加了两行代码

cssnext: {    browsers: "last 10 versions",  },

Copy after login

和

loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[path][name]-[local]!cssnext-loader'

Copy after login

然后在重新 npm start 一下，会生成各种前缀了。而且他不会生成编译过的文件，目录结构依然很清爽。