Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.03.2020, 21:46
Аватар для GayCoder
Аспирант
Отправить личное сообщение для GayCoder Посмотреть профиль Найти все сообщения от GayCoder
 
Регистрация: 28.01.2016
Сообщений: 97

Не правильно собирается css
Есть проект с такой структурой:

$ tree -I 'node_modules|dist'
.
├── package.json
├── package-lock.json
├── README.md
├── src
│   ├── index.js
│   ├── public
│   │   └── index.html
│   ├── style
│   │   ├── _base.scss
│   │   ├── index.scss
│   │   └── _vars.scss
│   └── utils.js
└── webpack.config.js


Есть webpack.config.js:

'use strict'

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const path = require('path')

const dist = path.resolve(__dirname, 'dist')

const isDevelopment = !process.env.production
const isProduction = process.env.production

module.exports = {
  entry: './src/index.js',
  output: {
    path: dist,
    filename: 'bundle.[hash].js'
  },
  devtool: 'source-map',
  devServer: {
    contentBase: dist
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        // настройки вынесены в .babelrc
        use: 'babel-loader'
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          // fallback to style-loader in development
          isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              sourceMap: isDevelopment
            }
          }
        ]
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader'
          }
        ]
      }
    ]
  },
  // Позволяет имполртировать модули, опуская расширения
  resolve: {
    extensions: ['.js', '.json', '.scss']
  },
  plugins: [
    // Clean build folder
    new CleanWebpackPlugin(),
    new CopyPlugin([{ from: './src/public' }]),
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: '[name].css',
      chunkFilename: '[id].css'
    }),
    new HtmlWebpackPlugin({
      template: './src/public/index.html'
    })
  ]
}


Вместо сборки css, стили инлайнятся (вставляются через style). ЧЯДНТ?
Ответить с цитированием
  #2 (permalink)  
Старый 06.03.2020, 12:34
Аспирант
Отправить личное сообщение для AleksSergSB Посмотреть профиль Найти все сообщения от AleksSergSB
 
Регистрация: 20.11.2016
Сообщений: 72

Запись в style делает лоадер style-loader. Начните с проверки действительно ли isDevelopment = false когда собираете проект. Выведите значение в консоль console.log(isDevelopment) перед module.exports
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как задать фиксированые оступы элементов, не нарушая структуру css vuler Общие вопросы Javascript 1 02.11.2015 07:44
Как правильно добавить в javascript несколько стилей css? trixter5 Javascript под браузер 3 04.04.2013 22:20
Шрифты в css antserg (X)HTML/CSS 2 15.06.2011 14:31
(jScrollPane) помогите правильно прописать css для div'ов _shpion_ jQuery 0 14.05.2011 16:16
CSS vs DOCTYPE gaolong (X)HTML/CSS 11 24.03.2009 10:54