How to expand Breakpoints

[burgdigital-np]

Hello, thanks for your great work.

Sadly I have trouble to expand the existing breakpoints. I tryed to overwrite the existing, that did not work, than I tried to expand the original file, that dident work either. Can you help me?

`@grid-breakpoints: xs 0, sm 576px, md 768px, lg 992px, xl 1200px, xxl 1440px;

@container-max-widths: sm 540px, md 720px, lg 960px, xl 1140px, xxl 1770px;`

[seanCodes]

Hi! Thanks for using the port! Sorry for the delayed reply.

I tried out overriding those variables with the values you included above, but it compiled successfully and the output CSS looked correct as well. 😕

Can you tell me what the rest of this file looks like? Also, do you mind sharing some of the details of how you have things configured (like whether you’re using npm, how you’re compiling the Less, etc.)?

[burgdigital-np]

Hey, thanks for looking at it.

We use npm with a Gruntfile

less: { build: { options: { compress: true }, files: [ { expand: true, src: ['*.less'], cwd: '<%=pkg.config.srcDirectory%>/<%=pkg.config.cssDirectory %>', dest: '<%=pkg.config.distDirectory%>/<%=pkg.config.cssDirectory %>', ext: '.css' } ] } },

---

"_from": "less@>=2.7.1 <2.8.0", "_id": "less@2.7.3", "_nodeVersion": "8.4.0",

---

{ "name": "xxxxxxxxxxxxxxxxxxxxxxxxxxxx", "version": "1.0.0", "description": "", "main": "grunt serve", "scripts": { "start": "grunt serve", "server only": "grunt serve-nobuild", "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "xxxxxxxxxxxxxxxxxxxxxxxxxxxx" }, "author": "", "license": "ISC", "bugs": { "url": "xxxxxxxxxxxxxxxxxxxx" }, "config": { "serverport": "8009", "distDirectory": "dist", "srcDirectory": "src", "cssDirectory": "css", "jsDirectory": "js", "imgDirectory": "img", "fontsDirectory": "fonts", "downloadDirectory": "download", "htmlDirectory": "html", "htmlPartialsDirectory": "html/partials" }, "homepage": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", "devDependencies": { "grunt": "^1.0.2", "grunt-assemble": "^0.6.3", "grunt-contrib-clean": "^1.1.0", "grunt-contrib-connect": "^1.0.2", "grunt-contrib-copy": "^1.0.0", "grunt-contrib-htmlmin": "^2.4.0", "grunt-contrib-imagemin": "^2.0.1", "grunt-contrib-jshint": "^1.1.0", "grunt-contrib-less": "^1.4.1", "grunt-contrib-sass": "^1.0.0", "grunt-contrib-uglify": "^3.3.0", "grunt-contrib-watch": "^1.0.0", "grunt-ftp-deploy": "^0.2.0", "grunt-sftp-deploy": "^0.2.5", "grunt-task-loader": "^0.6.0", "grunt-tinypng": "^0.7.0" }, "dependencies": { "npm": "^5.7.1" } }

[seanCodes]

Okay, it looks like the easiest way to get things working with your Grunt setup would be to use [less-plugin-npm-import]().

Install it using npm install less-plugin-npm-import --save-dev on the command line and then update your Less task to use the plugin:

less: {
  build: {
    options: {
      compress: true,
      plugins: [
        new (require('less-plugin-npm-import'))()
      ]
    },
    files: [
      {
        expand: true,
        src: ['*.less'],
        cwd: '<%=pkg.config.srcDirectory%>/<%=pkg.config.cssDirectory %>',
        dest: '<%=pkg.config.distDirectory%>/<%=pkg.config.cssDirectory %>',
        ext: '.css'
      }
    ]
  }
},

After that’s done import bootstrap-less in the Less file where you're overriding the vars.

@import "npm://bootstrap-less-port/less/bootstrap";

@grid-breakpoints:
  xs 0,
  sm 576px,
  md 768px,
  lg 992px,
  xl 1200px,
  xxl 1440px;

@container-max-widths:
  sm 540px,
  md 720px,
  lg 960px,
  xl 1140px,
  xxl 1770px;

Hope this helps! Let me know if it works or what errors you get (if any).

[seanCodes]

@burgdigital-np Were you able to get things working?

[seanCodes]

@burgdigital-np I'm going to go ahead and close this but please feel free to reopen it and let me know if you have any more trouble!

[burgdigital-np]

@seanCodes: Sorry, I was away for some days. It seems that after no changes at all, it works now. I realy dont know why, I tryed all posibilitys before writing an issue. If I find out that something was changed, I will write it here.