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

@iwasaki 10views 更新:2017年11月14日

レガシーなので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
    }),
  ],

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません