レガシーなプロジェクトのJavascriptとCSSに対してwebpackを使う

レガシーなのでCSSは純粋なCSSとして出力したい

ExtractTextPluginを使います。

  module: {
    loaders: [{
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract(
        'css-loader?-url&minimize!sass-loader?includePaths[]=' + path.resolve(__dirname, './node_modules/compass-mixins/lib') + '&includePaths[]=' + path.resolve(__dirname, './node_modules')),
    }, ],
  },

みたいにすることでcssファイルとして出力されます。

minify化する場合には「css-loader?-url&minimize」のようにします。

「-url」はURLのパス解決のおせっかい機能をOFFにする場合に指定します。

レガシーに「compass-mixins」を使っている場所がある場合にはincludePathsで指定をします。

pluginsで以下のように指定することでファイルを別々のCSSファイルとして出力することができます。

  plugins: [
    new ExtractTextPlugin({
      filename: '[name].css',
      allChunks: true
    }),
  ],

AWS構築サービスの全てをまとめた資料を公開中

ハックノート(TOWN株式会社)では、AWSの導入や構築支援を行っています。AWS導入メニューやサービス詳細、構成例や費用を掲載した資料をダウンロードできます。

AWSの新規導入やAWSへの移行を検討の際は、ぜひご参考ください。


APNコンサルティングパートナー

TOWN株式会社はAmazon公認コンサルティングパートナーです。