Webpack2不理解@import聲明，我SASS文件（如何編譯SASS與webpack2？）

Question

Using Webpack 2和sass-loader 4.11

webpack --config webpack.config.js

這裏是我的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，但是我說我./sass路徑modulesDirectories陣列和仍然得到錯誤。

更多的挖掘後，我還發現this Github issue and solution here，但他的修復並沒有爲我工作，要麼:(

Answer 1

我在這裏轉載您的問題，並能解決它需要你頂嘴。

首先，你需要改變你的WebPack配置文件。一些要點：

1. 放YOUT scss裝載機內rules選項，每個裝載器分離成對象（像this）;
2. 獲得在配置上擺脫線var sass = require("./sass/lifeleveler.scss");的。該文件應該從您的入口點JS調用。在這種情況下：dist/main.js。此時（在讀取配置之前），webpack未配置爲加載任何東西。這導致你顯示的錯誤。
3. 擺脫sassLoader.includePaths和resolve.modulesDirectories，因爲它們無效webpack 2鍵。

的WebPack 2配置結構是一個有點不同的WebPack 1（你可以檢查的官方遷移指南here）..

工作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 

確保您已經安裝了故宮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')