Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Issues
  • #24949
Closed
Open
Issue created Dec 05, 2017 by Administrator@rootContributor

docs: suggested webpack config needlessly includes precss

Created by: oschonrock

https://getbootstrap.com/docs/4.0/getting-started/webpack/

Suggests:

  ...
  {
    test: /\.(scss)$/,
    use: [{
      loader: 'style-loader', // inject CSS to page
    }, {
      loader: 'css-loader', // translates CSS into CommonJS modules
    }, {
      loader: 'postcss-loader', // Run post css actions
      options: {
        plugins: function () { // post css plugins, can be exported to postcss.config.js
          return [
            require('precss'),
            require('autoprefixer')
          ];
        }
      }
    }, {
      loader: 'sass-loader' // compiles SASS to CSS
    }]
  },
  ...

This a great starting point. Autoprefixer is required because the scss files don't include the vendor prefixes, so we need postcss. But I did wonder why the "precss" plugin is also suggested. As I understand it precss allows some "scss-like" mixins, variables, etc with slightly different syntax. Surely this is already covered by sass-loader which compiles the provided scss files? And because sass-loader runs first, it has already compiled all those scss features. So precss => NOP?

I tested with and without precss. The only difference in output appears to be that precss strips the :root { ... list of custom css variables ... } and formats the bulk of the css with multiple selectors per line. The official dist css files do have the custom css vars. They are not actually used anywhere, and would not work in IE11 anyway, but might be useful for reference from any custom js?

So: "less is more" ?

Suggest removing "precss" plugin from this suggested webpack config.

Assignee
Assign to
Time tracking