css モジュールと cssnext をビルドして開発環境を自動的に更新する_html/css_WEB-ITnose

まずこの画像を見てください

CSS モジュールをサポートしており、保存時に自動的に更新されるので、優れた開発環境です。このプロジェクトは、ultimate-hot-reloading-example から来ています

使用方法は非常に簡単で、コマンドラインに

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

と入力して http:/ を開きます。ブラウザの /localhost:3000/ で効果を確認できます。

エディターで開き、clientcomponentsApp.css ファイルを変更すると、スタイルがリアルタイムで更新されます。

clientcomponentsApp.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'    }    ]  }};

の 2 行のコード

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

と

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

を追加しました。その後、npm を再起動すると、さまざまなプレフィックスが生成されます。さらに、コンパイルされたファイルは生成されず、ディレクトリ構造は依然として非常にクリーンです。