Webpack2 nicht @import Aussage in meinem SASS Dateien zu verstehen (Wie SASS mit webpack2 kompilieren?)

Question

Using Webpack 2 und sass-loader 4,11

webpack --config webpack.config.js

Hier ist meine 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' 
}; 

---

Hinweis, wenn ich versuchte, diese an der Spitze meiner config:

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

diesen Fehler Got:

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

, weshalb ich nur mit diesem ging: var sass = require("./sass/lifeleveler.scss");

---

Und mein liveleveler.scss-Datei (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 

Endlich meine Ordnerstruktur, siehst du irgendwelche eklatanten Probleme?

I found this solution here, jedoch habe ich meine ./sass Weg zum modulesDirectories Array und immer noch den Fehler.

Nach mehr Graben fand ich auch this Github issue and solution here, aber seine Verlegenheit nicht für mich arbeiten entweder :(

Answer 1

ich Ihr Problem hier wiedergegeben und war in der Lage, es zu beheben.

Zunächst müssen Sie Ihre Webpack-Konfigurationsdatei ändern. Einige Punkte:

1. put yout scss loader innerhalb rules Option und trennen Sie die einzelnen Lader in ein Objekt (wie this);
2. loswerden der Linie var sass = require("./sass/lifeleveler.scss"); an der Spitze der Konfiguration. Die Datei sollte von Ihrem Einstiegspunkt JS aufgerufen werden. In diesem Fall: dist/main.js. An diesem Punkt (vor dem Lesen der Konfiguration) ist Webpack nicht konfiguriert, um irgendwelche Sachen zu laden. Das verursacht den angezeigten Fehler.
3. loswerden sassLoader.includePaths und resolve.modulesDirectories, da sie nicht gültig webpack 2 Schlüssel sind.

Webpack 2 Konfigurationsstruktur ist ein bisschen anders aus Webpack 1 (einen Leitfaden offiziellen Migration überprüfen here) ..

Die Arbeits webpack.config.js Datei so etwas wie dieses würde:

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' 
}; 

In Ihrem main.js können Sie jetzt Ihre scss-Datei aufrufen:

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

Stellen Sie sicher, npm style-loader installiert haben, css-loader, node-sass und sass-loader.

Jetzt kompiliert korrekt!

Answer 2

diese Konfiguration Versuchen Sie, Ihre 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' 
    }) 
] 
... 

Dies ist die Version von Abhängigkeiten, die Sie benötigen.

"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", 
    } 

vergessen Sie nicht Ihre style.scss Wurzel Ihrer Eingabe-Datei benötigen.

Beispiel: in Ihrem ./dist/main.js benötigen Ihre sass von require('../sass/liveleverer.scss') Schreiben