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')