Webpack2不理解我的SASS文件中的@import语句(如何使用webpack2编译SASS？)

Question

使用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");

得到此错误:

错误:找不到模块'!raw-loader!sass-loader!./ sass/lifeleveler.scss'

这就是为什么我这样做的原因: var sass = require("./sass/lifeleveler.scss");

---

还有我的lifeleveler.scss文件(来自我的SASS项目入门套件):

@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

最后我的文件夹结构,你看到任何明显的问题吗？

我在这里找到了这个解决方案,但是我添加了我./sass的modulesDirectories数组路径并仍然收到错误.

经过更多的挖掘后,我也发现了这个Github问题和解决方案,但他的修复对我来说也不起作用:(

Answer 1

我在这里复制了你的问题,并且能够解决它.

首先,您需要更改webpack配置文件.一些要点:

1. 把yout scssloader放在rules选项中并将每个加载器分成一个对象(就像这样);
2. 摆脱var sass = require("./sass/lifeleveler.scss");配置顶部的线.应该从入口点JS调用该文件.在这种情况下:dist/main.js.此时(在读取配置之前),webpack未配置为加载任何内容.这导致你出现的错误.
3. 摆脱sassLoader.includePaths和resolve.modulesDirectories,因为他们是无效的WebPack 2个键.

Webpack 2配置结构与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

请确保你已经安装了故宫style-loader,css-loader,node-sass和sass-loader.

现在编译正确!