Webpack2はここに私のSASSファイル（webpack2とSASSをコンパイルするには？）

Question

Using Webpack 2とsass-loader 4.11

webpack --config webpack.config.js

に@import文を理解していないが、私のwebpack.config.js

です

var path = require('path'); 
var sass = require("./sass/lifeleveler.scss"); 

module.exports = { 
    entry: './dist/main.js', 
    output: { 
     filename: 'lifeleveler.app.js', 
     path: path.resolve(__dirname, 'dist') 
    }, 
    watch: true, 
    watchOptions: { 
     aggregateTimeout: 300, 
     poll: 1000, 
     ignored: /node_modules/ 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.scss$/, 
       include: [ 
        path.resolve(__dirname, 'node_modules'), 
        path.resolve(__dirname, './sass') 
       ], 
       loaders: ["style-loader", "css-loader", "sass-loader"] 
      } 
     ], 
     rules: [ 
      { 
       test: /\.tsx?$/, 
       loader: 'ts-loader', 
       exclude: /node_modules/, 
      }, 
      { 
       enforce: 'pre', 
       test: /\.tsx?$/, 
       use: "source-map-loader" 
      } 
     ] 
    }, 
    sassLoader: { 
     includePaths: [path.resolve(__dirname, "./sass")] 
    }, 
    resolve: { 
     modulesDirectories: ['./sass'], 
     extensions: [".tsx", ".ts", ".js", "scss"] 
    }, 
    devtool: 'inline-source-map' 
}; 

---

var css = require("!raw-loader!sass-loader!./sass/lifeleveler.scss"); 
var css = require("!css-loader!sass-loader!./sass/lifeleveler.scss"); 

はこのエラーを得た：

私はこれで行きました理由です

Error: Cannot find module '!raw-loader!sass-loader!./sass/lifeleveler.scss'

：var sass = require("./sass/lifeleveler.scss");

---

そして、私の、私は私の設定の上部にこれを試してみました注意lifeleveler.scssファイル（from my SASS project starter kit）：

@import "vendors/normalize"; // Normalize stylesheet 
@import "vendors/reset";  // Reset stylesheet 
@import "modules/base";   // Load base files 
@import "modules/defaults";  // Defaults elements 
@import "modules/inputs";  // Inputs & Selects 
@import "modules/buttons";  // Buttons 
@import "modules/layout";  // Load Layouts 
@import "modules/svg";   // Load SVG 
@import "modules/queries";  // Media Queries 

最終的に私のフォルダ構造は、どんな目立つ問題がありますか？

I found this solution here、しかし私はmodulesDirectoriesアレイへの私の./sassのパスを追加して、まだエラーを取得。より多くの掘り私もthis Github issue and solution hereを見つけましたが、彼の修正は私のために動作しませんでしたどちらか:(

Answer 1

を書き込むことによって、あなたのSASSが必要です。

まず、webpack設定ファイルを変更する必要があります。いくつかのポイント：オブジェクト（のようなthis）にrulesオプションと個別の各ローダー内scssローダーをYOUT

1. プット。
2. コンフィギュレーションの上部にあるvar sass = require("./sass/lifeleveler.scss");行を削除します。このファイルは、エントリポイントJSから呼び出す必要があります。この場合：dist/main.js。この時点で（configを読む前に）、webpackは何も読み込まないように設定されています。それはあなたが示したエラーの原因です。
3. sassLoader.includePathsとresolve.modulesDirectoriesは有効ではありませんので、webpack 2のキーを削除してください。

WebPACKの2コンフィギュレーション構造は（あなたが公式の移行ガイドhereを確認することができます）WebPACKの1とは少し異なる..です

作業webpack.config.jsファイルには、このようなものになるだろう：

var path = require('path'); 


module.exports = { 
    entry: './dist/main.js', 
    output: { 
     filename: 'lifeleveler.app.js', 
     path: path.resolve(__dirname, 'dist') 
    }, 
    watch: true, 
    watchOptions: { 
     aggregateTimeout: 300, 
     poll: 1000, 
     ignored: /node_modules/ 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.scss$/, 
       include: [ 
        path.resolve(__dirname, "sass") 
       ],    
       use: [ 
        { loader: "style-loader" }, 
        { loader: "css-loader" }, 
        { loader: "sass-loader" } 
       ] 
      }, 
      { 
       test: /\.tsx?$/, 
       loader: 'ts-loader', 
       exclude: /node_modules/, 
      }, 
      { 
       enforce: 'pre', 
       test: /\.tsx?$/, 
       use: "source-map-loader" 
      } 
     ] 
    }, 
    resolve: { 
     extensions: [".tsx", ".ts", ".js", "scss"] 
    }, 
    devtool: 'inline-source-map' 
}; 

main.jsでは、scssファイルの呼び出しが必要になります。

require('../sass/lifeleveler.scss'); //assuming main.js is at ./dist 

あなたがNPM style-loader、css-loader、node-sassとsass-loaderをインストールしていることを確認してください。

正しくコンパイルされました。

Answer 2

後

これはあなたが必要とする依存関係のバージョンである、あなたのwebpack.config.js

... 
module: { 
    rules: [ 
    { 
     test: /.s?css$/, 
     use: ExtractTextWebpack.extract({ 
     fallback: 'style-loader', 
     use: [ 
      { 
      loader: 'css-loader', 
      options: { 
       sourceMap: true, 
       importLoader: true 
      } 
      }, 
      { 
      loader: 'postcss-loader', 
      options: { 
       plugins: [ 
       ... // fill your config 
       ] 
      } 
      }, 
      { 
      loader: 'sass-loader', 
      options: { 
       ... // fill your config 
      } 
      } 
     ] 
     }) 
    } 
    ] 
}, 
plugins: [ 
    new ExtractTextWebpack({ 
    filename: 'bundle.css' 
    }) 
] 
... 

にこの設定を試してみてください。

"devDependencies": { 
    "css-loader": "^0.26.1", 
    "extract-text-webpack-plugin": "beta", 
    "node-sass": "^4.5.0", 
    "postcss-loader": "^1.2.2", 
    "sass-loader": "^4.1.1", 
    "style-loader": "^0.13.1", 
    "webpack": "^2.2.1", 
    } 

は、あなたのエントリファイルにあなたのstyle.scssルートを必要とすることを忘れないでください。

例：あなたの./dist/main.jsで は、私がここにあなたの問題を再現し、それを修正することができましたrequire('../sass/liveleverer.scss')