欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-05-30 21:34:11
...
先看这张图

实在太爽了,支持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 一下,会生成各种前缀了。而且他不会生成编译过的文件,目录结构依然很清爽。