当前位置:Gxlcms > html代码 > 搭建cssmodule和cssnext自动刷新开发环境_html/css_WEB-ITnose

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

时间:2021-07-01 10:21:17 帮助过:15人阅读

先看这张图

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

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

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

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

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

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

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

在命令行输入

npm install cssnext-loader --save-dev

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

加了两行代码

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

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

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

人气教程排行