web-dev-qa-db-ja.com

webpack sass-loaderがcssファイルを生成しない

Webpack sass-loaderでcssファイルをレンダリングする方法がわかりません。

Webpackconfig.jsは次のようになります。

module.exports = {
  context: __dirname + "/app",
  entry: {
    javascript: "./app.js",
    html: "./index.html"
  },


  output: {
    filename: "app.js",
    path: __dirname + "/dist"
  },


  module: {
    loaders: [
      //JAVASCRIPT
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ["babel-loader"],
      },

      //Index HMTML
      {
        test: /\.html$/,
        loader: "file?name=[name].[ext]",
      },
      //Hotloader
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ["react-hot", "babel-loader"],
      },

      // SASS
      {
        test: /\.scss$/,
        loader: 'style!css!sass'
      }

    ],
  }

}

ご覧のとおり、ドキュメントで指定されているsass-loaderモジュールローダーを使用しています。

  {
    test: /\.scss$/,
    loader: 'style!css!sass'
  }

私のルートは次のように見えます：

Project Root:
  app:
    style.scss
  dist:
   ?????? WTF is my css file??
  webpack.config.js

Htmlローダーやjsx babbleローダーなど、他のすべてを機能させることができます。コマンドラインにwebpackを入力すると、事態が発生します。

Sass Loaderで何か間違ったことをしています。それは何ですか？助けてください。

sassloaderwebpack
37
PAT-O-MATION

スタイルローダーを使用しています。デフォルトでは、CSSをJavascriptに埋め込み、実行時に挿入します。

JavaScriptに埋め込まれたCSSの代わりに実際のCSSファイルが必要な場合は、ExtractTextPluginを使用する必要があります。

基本的な設定は次のとおりです。

  1. var ExtractTextPlugin = require('extract-text-webpack-plugin');をWebpack構成ファイルの先頭に追加します。

  2. Webpack構成に次を追加します。

    plugins: [
    new ExtractTextPlugin('[name].css'),
]

  3. SASSローダー構成を次のように変更します。

    {
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract(
        'style-loader', // backup loader when not building .css file
        'css-loader!sass-loader' // loaders to preprocess CSS
    )
}

これにより、バンドル内にあるすべてのCSSが個別のファイルに抽出されます。この名前はエントリポイント名に基づいており、この場合、javascript.css（設定のエントリ部分から）。

ExtractTextPlugin.extract- loaderはプラグインによって使用され、コード内でCSSを見つけて別のファイルに配置します。最初に与えるパラメータは、たとえば非同期モジュールでファイルに遭遇した場合にフォールバックするローダーです。通常、これはほとんど常にstyle-loader。 2番目のパラメーターは、CSSの処理に使用するローダー、この場合はcss-loaderおよびsass-loader、ただしpostcss-loaderもよく使用されます。

Webpackを使用してCSSを構築する方法の詳細については、こちらをご覧ください。 https://webpack.github.io/docs/stylesheets.html#separate-css-bundle

57
Ambroos

TypeScriptを使用して、同様の問題に遭遇すると、「scss」ファイルのインポートは、Webpackが開始されているインデックスファイル内にある必要があることを発見しました。

内部モジュールではなく、index.tsにインポートします。

0
droritos