Heim > Web-Frontend > HTML-Tutorial > 搭建css module和cssnext自动刷新开发环境_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-21 08:53:37
Original
1309 Leute haben es durchsucht

先看这张图

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

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

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

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

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

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

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

在命令行输入

npm install cssnext-loader --save-dev
Nach dem Login kopieren

然后修改 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'    }    ]  }};
Nach dem Login kopieren

加了两行代码

cssnext: {    browsers: "last 10 versions",  },
Nach dem Login kopieren

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

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage