Webpack SASS-загрузчик включает разрывы операторов SASS @import statemetns

Итак, для фона изначально я исключал каталог node_modules в моей конфигурации Webpack, который отлично работал для моих операторов sass @import, но очень затруднял включение вещей из каталога node_modules. Поэтому я переключил загрузчик SASS на следующий

{
            test: /\.scss$/,
            include: [path.resolve(__dirname, "/src/client"), path.resolve(__dirname, "/node_modules/angular-material/")],
            loader: 'style-loader!css-loader!autoprefixer-loader!sass-loader'
},

Также обратите внимание, что я пробовал с завершающей косой чертой и без косой черты на клиенте. Все мои файлы src, включая файлы sass, находятся в каталоге ./src/client, включая подкаталоги. Теперь проблема в том, что когда я запускаю Webpack, все мои операторы импорта больше не работают. и я получаю следующую ошибку всякий раз, когда пытаюсь импортировать один из моих собственных файлов sass:

ERROR in ./src/client/app/app.scss
Module parse failed:   /Users/mikedklein/development/vncuxf/src/client/app/app.scss Line 1:    Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
| @import 'common/common';
| @import 'general';
|
@ ./src/client/app/app.module.es6 85:0-21

Если я закомментирую оператор включения, все будет хорошо, но я знаю, что это не очень хороший подход. Для справки я также включил свой оператор разрешения из моей конфигурации:

// Resolves so require statements don't need extentions
resolve: {
    extensions: ['', '.js', '.es6', '.scss', '.css', '.html', '.json'],
    alias: {
      angular_material_scss: __dirname + "/node_modules/angular-material/angular-material.scss"
    }
}

webpack sass sass-loader
person mikedklein    schedule 15.12.2015    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Так что я думаю, что я решил это

module: {
    loaders: [
        {
            test: /\.(es6|js)$/,
            exclude: /node_module/,
            loader: 'babel-loader'
        },
        {
            test: /\.css$/,
            exclude: /node_modules/,
            loader: 'style-loader!css-loader!autoprefixer-loader'
        },
        {
            test: /\.scss$/,
            loader: 'style-loader!css-loader!autoprefixer-loader!sass loader'
        }
    ]
},
// This is the key need to have include paths in the sass loader option.
sassLoader: {
  includePaths: [path.resolve(__dirname, './src/app'), path.resolve(__dirname, '/node_modules/angular-material')]
}

Мне все еще любопытно, является ли это наиболее эффективным подходом, когда файлы sass хранятся в нескольких каталогах.

person mikedklein    schedule 26.01.2016
comment
путь не определен в моем случае :( - person Deep Kakkar; 14.04.2018