Webpack: преобразование JS в SASS и CSS - PullRequest
Новая
       114

Webpack: преобразование JS в SASS и CSS

1 голос
/ 30 января 2020

Моя цель - создать файл SASS и CSS из файла Javascript, который содержит все мои темы и цвета, из которых я выполняю итерацию.

У меня есть файл themes.js, который содержит два объекты, которые содержат все мои цветные узоры: colorPalette и themes. Я импортирую эти объекты в мою точку входа (./src/index.js). Точка входа использует JS для перебора всех палитр и тем для создания большой строки SASS. Используя плагин HtmlWebpack, я могу распечатать это в DOM. Однако моя основная цель - создать файл SASS с этой выходной строкой. Я использовал загрузчики sass, style и css, а также плагины miniCssExtract и textExtract, чтобы попытаться захватить эту строку как файл SASS. Я немного поигрался с конфигом (добавление нескольких плагинов, удаление их всех и т. Д. c.), Но ниже приведена моя последняя итерация: 

var config = { 
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['style-loader','css-loader', 'sass-loader']
        })
      }
    ]
  }
}

var clientConfig = ({ mode, presets } = { mode: "production", presets: [] }) => {
  return webpackMerge(
    {
      mode,
      plugins: [ new HtmlWebpackPlugin()]
    },
    modeConfig(mode),
    presetConfig({ mode, presets }),
  Object.assign({}, config, {
    name:"main",
    entry: "./src/index",
    output: {
      path: path.resolve(__dirname +'dist'),
      filename: "bundle.js"
    }
    })
  )
}

module.exports = [clientConfig]

Я понимаю, что файл, указанный в веб-пакете output - это исполняемый файл, представляющий собой массив из нескольких модулей, которые упаковываются, но я не понимаю, как (или если мне нужно) использовать это для генерации моего файла SASS. Я чувствую, что немного сблизился с тем, как подойти к веб-пакету, поэтому любая помощь очень ценится.

1 Ответ

0 голосов
/ 31 января 2020

Вы можете сослаться на мой код здесь 

module: {
        rules: [{
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            minimize: true,
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            }
        ]
    }

Затем просто импортируйте файл в ваш js как этот 

import "style.scss";
...