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 ，但他的修复对我也不起作用 :(

最佳答案

我在这里重现了您的问题并且能够解决它。

首先，您需要更改您的 webpack 配置文件。几点:

1. 将你的 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

确保你已经安装了 npm style-loader、css-loader、node-sass 和 sass-loader.

现在可以正确编译了!

关于javascript - Webpack2 不理解我的 SASS 文件中的 @import 语句(How to compile SASS with webpack2?)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42058357/