Webpack2 не понимает утверждение @import в моих файлах SASS (Как скомпилировать SASS с помощью webpack2?)

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

Я воспроизвел вашу проблему здесь и смог ее исправить.

Прежде всего, вам необходимо изменить файл конфигурации вашего веб-пакета. Некоторые моменты:

1. поставить тебя scss погрузчик внутри rules опция и разделение каждого загрузчика на объект (как этот);
2. избавиться от линии var sass = require("./sass/lifeleveler.scss"); в верхней части конфигурации. Файл должен быть вызван с вашей точки входа JS. В этом случае: dist/main.js, На данный момент (до прочтения конфига), веб-пакет не настроен для загрузки каких-либо вещей. Это вызывает ошибку, которую вы показали.
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

Убедитесь, что вы установили npm 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 root к вашему входному файлу.

Пример: в вашем ./dist/main.js требуйте вашего нахальства, написавrequire('../sass/liveleverer.scss')