@ericssan это по большей части для тебя инфа

А мне это зачем?) я вообще мимокрокодил

Ну изначально другой человек это спрашивал https://t.me/webpack_ru/50922

Привет, спецы. Подскажите. Как настроить wds + precss? Подключил все по доке вебпака, ошибок в консольке нет, но и тега стайл тоже нет)))

я даже не знаю что такое precss )

Шляпа, для того, что бы из css сделать scss

Ух

Даже хуже, для того, что бы в css писать синтаксисом scss

страшная вещь

Падажди, а что такое wds? это же про обьеденение вайвай что то?

Webpack-dev-server))

Хочу забрать математику цветов на постцсс.

ну конфиг покажи хоть, где ты делаешь это

С мобилки не покажу, но она простейшая. Postcss.config.js : module.exports = { plugins: [ precss() ] }, webpack.config.js :  ... { Test: /\.sss, use: [ style-loader, css-loader, { loader: 'postcss-loader', options: { config: { path: path_to_ postconfig }}}]} примерно так

В index.js реквайрим index.sss, в котором декларируем переменную $green: #333; h1{ color: $green} запускаем девсерв, тега style в выводе нет.

та же хрень только с scss, но у меня это только при включенном hot: true ломается. На билде все норм

Как раз с этим дев-сервер работает корректно.
{
                   test: /\.s[ac]ss$/i,
                   include: paths,
                   use: [
                       // Creates style nodes from JS strings
                       'style-loader',
                       // Translates CSS into CommonJS
                       'css-loader',
                       // Compiles Sass to CSS
                       'sass-loader',
                   ],
               }

я хз. У меня с hot: false все работает нормально. Как только делаю его true, вебпак сразу же перестает инжектить стили в хеад и разворачивать вью компоненты

webpack.devwebpack.dev

const merge = require('webpack-merge');
const webpack = require('webpack');
const path = require('path');

const CACHEDIR = path.resolve(__dirname, '..', 'node_modules', '.cache');

const getThreadLoader = name => ({
   loader: 'thread-loader',
   options: {
       workerParallelJobs: 50,
       poolRespawn: false,
       name
   }
});


const baseWebpackConfig = require('./webpack.base.config');
const devWebpackConfig = merge(baseWebpackConfig, {
   // DEV config
   mode: "development",
   devtool: "cheap-module-eval-source-map", // подключаем сорс мапы для отладки вебкапа
   devServer: {
       // настройки дев серва
       host: "localhost", // default
       contentBase: baseWebpackConfig.externals.paths_build,
       port: "8081", // 8080 по дефолту (у докера такой же), поэтому заменил порт
       overlay: {
           warnings: true,
           errors: true
       },
       proxy: {
           '/': {
               target: 'http://localhost:8081/region.html',
               pathRewrite: {
                   '.*': ''
               }
           }
       },
       progress: true,
       inline: true,
       quiet: true,
       historyApiFallback: true,
       // hot: true,
       open: true
   },

   // Пересборка при изменениях и уменьшение задержки перед ней
   watch: true,
   watchOptions: {
       aggregateTimeout: 100
   },

   module: {
       rules: [{
               // правила для модулей
               test: /\.js$/, // какие файлы обрабатывать
               exclude: "/node_modules/", // исключаем файлы, тк библиотеки прогоняются через бабель
               use: [{
                       loader: 'cache-loader',
                       options: {
                           cacheDirectory: path.resolve(CACHEDIR, 'js')
                       }
                   },
                   getThreadLoader('js'), {
                       loader: 'babel-loader',
                       options: {
                           cacheDirectory: path.resolve(CACHEDIR, 'babel')
                       }
                   }
               ]
           },
           {
               test: /\.scss$/,
               use: ['thread-loader', 'style-loader', 'css-loader', 'postcss-loader', 'sass-loader', 'import-glob-loader']
           }
       ]
   },

   plugins: [
       new webpack.SourceMapDevToolPlugin({
           filename: "[file].map"
       })
   ]
});

module.exports = new Promise((resolve, reject) => {
   resolve(devWebpackConfig)
})


**webpack.base
const path = require('path')
const fs = require('fs')
const webpack = require('webpack')

const HtmlWebpackPlugin = require('html-webpack-plugin')
const {
   VueLoaderPlugin
} = require('vue-loader')
const CopyWebpackPlugin = require('copy-webpack-plugin')


// Переменные для путей
const PATH_SRC = path.join(__dirname, './src')
const PATH_BUILD = path.join(__dirname, './build')
const PATH_ASSETS = path.join(__dirname, './src/assets/')


// Переменные для HtmlWebpackPlugin
const PAGES_DIR = path.join(__dirname, './src/pages') // путь к html-файлам
const PAGES = fs.readdirSync(PAGES_DIR).filter(fileName => fileName.endsWith('.html')) //