Какой загрузчик мне следует использовать для компиляции URL-адреса фонового изображения в SASS с использованием webpack 4? - PullRequest
Новая
       73

Какой загрузчик мне следует использовать для компиляции URL-адреса фонового изображения в SASS с использованием webpack 4?

0 голосов
/ 11 июля 2020

У меня есть загрузчик TypeScript и SASS в webpack 4, но он генерирует ошибку, когда я пытаюсь использовать URL-адрес изображения внутри любого файла SASS. Я уже пытаюсь использовать file-loader and url-loader Но он генерирует образ в новую папку. Я не хочу этого.

Я не использую никакой фреймворк. Мне нужно скомпилировать SASS с URL-адресом изображения, но я не могу использовать какое-либо изображение в своих файлах SASS.

пакеты. json> devDependencies 

  "devDependencies": {
    "css-loader": "^3.6.0",
    "mini-css-extract-plugin": "^0.9.0",
    "node-sass": "^4.14.1",
    "sass": "^1.26.10",
    "sass-loader": "^9.0.2",
    "style-loader": "^1.2.1",
    "ts-loader": "^8.0.0",
    "typescript": "^3.9.6",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12"
  }

webpack.config. js

const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');


module.exports = {

    watch: true,
    devtool: "source-map",
    mode: "development",

    entry: {
        bundle: path.resolve(__dirname, "./src/ts/bundle.ts"),
    },

    output: {
        path: path.resolve(__dirname, "./dist/"),
        filename: "js/[name].js"
    },

    module: {
        rules: [

            //typescript loader
            {
                test: /\.ts$/,
                use: 'ts-loader',
                include: [
                    path.resolve(__dirname, 'src/'),
                    path.resolve(__dirname, 'modules/'),
                ],
                exclude: /node_modules/, 
            },

           //sass|scss loader
            {
                test: /\.s[ac]ss$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    },

                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                ]
            },
        ]
    },


    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/[name].css',
            chunkFilename: 'css/[id].css',
        })
    ]
}

ошибка: 

ERROR in ./src/sass/bundle.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleParseError: Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
...