Не удается заставить webpack выводить связанный css?

Я новичок в webpack и следую за курсом. Но на самом деле они не говорят о том, как скомпилировать разные sass в css.

Я попробовал здесь, но получаю сообщение об ошибке. Я пытаюсь вывести его в styles.css для использования с wordpress

const path = require('path'),
settings = require('./settings');

module.exports = {

  entry: {
    home: [
            settings.themeLocation + "js/scripts.js"
        ],
        style: [
            settings.themeLocation +'styles/main.sass'
        ]
    App: settings.themeLocation + "js/scripts.js"
  },
  output: {
    home: [
    path: path.resolve(__dirname, settings.themeLocation + "js"),
    filename: "scripts-bundled.js"
    ]
    style:[
    path: path.resolve(__dirname, settings.themeLocation + "styles"),
    filename: "styles-bundled.css"
    ]
  },
  module: {

    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      { test: /\.css$/, use: 'css-loader' }
      { test: /\.sass$/, use: 'sass-loader' }
    ]
  },
  mode: 'development'
}

css webpack sass

20.09.2018 06:19

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Ответы 1

Вот фрагмент из моей конфигурации веб-пакета

Вам необходимо установить style-loader, css-loader и sass-loader
Следующий фрагмент предназначен для разработки

{
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                ],
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                ],
            },

Для производства

{
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            minimize: true,
                            importLoaders: 2,
                        },
                    },
                ],
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            minimize: true,
                            importLoaders: 3,
                        },
                    },
                    'sass-loader',
                ],
            },

& добавить фоллинг в раздел плагинов

new MiniCssExtractPlugin({
    filename: '[name].[chunkhash:8].css',
}),

Обратите внимание, что приведенные выше фрагменты могут не работать напрямую для вас. Это просто, чтобы дать вам представление о том, как webpack может обрабатывать css $ scss.

20.09.2018 07:08

Другие вопросы по теме

Преобразование веб-пакета с файлами карты в исходный исходный код (Typescript)

Объедините проект машинописного текста, для которого требуется веб-пакет

Используя Typescript, Webpack 4 и React, каждый раз, когда я включаю файл scss, имя стиля не определено в className

Модуль NPM заставляет веб-приложение не отображаться в IE11

Как настроить прокси для Webpack в продакшене

Angular 5 с требованием бросания Не удается прочитать свойство appendChild со значением null

Отсутствует контекст для svg в webpack

Загрузка файлов .mp3 с помощью Nuxt.js

Как использовать веб-пакет с загрузкой jquery?

Webpack (установить --save-dev) vs. (установить --save)

Не удается заставить webpack выводить связанный css?

Ответы 1

Другие вопросы по теме

Похожие вопросы