Some bootstrap4's css doesn't load in my phoenix project

Hello , I have updated phoenix css to bootstrap4, but some bootstrap4’s css doesn’t load in my phoenix project, for example in phoenix

30%20pm

in html file

40%20pm

I checked this and I know the css line doesn’t exist, weblayers expansion in chrome shows me that it’s bootstrap4

my

exports.config = {
  // See http://brunch.io/#documentation for docs.
  files: {
    javascripts: {
      joinTo: "js/app.js"

      // To use a separate vendor.js bundle, specify two files path
      // http://brunch.io/docs/config#-files-
      // joinTo: {
      //   "js/app.js": /^js/,
      //   "js/vendor.js": /^(?!js)/
      // }
      //
      // To change the order of concatenation of files, explicitly mention here
      // order: {
      //   before: [
      //     "vendor/js/jquery-2.1.1.js",
      //     "vendor/js/bootstrap.min.js"
      //   ]
      // }
    },
    stylesheets: {
      joinTo: "css/app.css",
      order: {
        after: ["priv/static/css/app.scss"]
      }
    },
    templates: {
      joinTo: "js/app.js"
    }
  },

  conventions: {
    // This option sets where we should place non-css and non-js assets in.
    // By default, we set this to "/assets/static". Files in this directory
    // will be copied to `paths.public`, which is "priv/static" by default.
    assets: /^(static)/
  },

  // Phoenix paths configuration
  paths: {
    // Dependencies and current project directories to watch
    watched: ["static", "css", "js", "vendor","scss", "fonts"],
    // Where to compile files to
    public: "../priv/static"
  },

  // Configure your plugins
  plugins: {
    babel: {
      // Do not use ES6 compiler in vendor code
      ignore: [/vendor/]
    },
    sass: {
      mode: 'native',
      options: {
        includePaths: ["node_modules/bootstrap/scss", "node_modules/font-awesome/scss"], // Tell sass-brunch where to look for files to @import
        precision: 8 // Minimum precision required by bootstrap-sass
      }
    },
    copycat: {
      "fonts" : ["static/fonts", "node_modules/font-awesome/fonts"],
      verbose : false, //shows each file that is copied to the destination directory
      onlyChanged: true //only copy a file if it's modified time has changed (only effective when using brunch watch)
    }
  },

  modules: {
    autoRequire: {
      "js/app.js": ["js/app"]
    }
  },

  npm: {
    enabled: true,
    globals: { // Bootstrap's JavaScript requires both '$' and 'jQuery' in global scope
      $: 'jquery',
      jQuery: 'jquery',
      Tether: 'tether',
      Popper: 'popper.js',
      bootstrap: 'bootstrap', // Require Bootstrap's JavaScript globally
    }
  }
};

and I added these in asset/css/app.css

add @import 'font-awesome';
add @import 'bootstrap';

if I rename web/static/css/app.css to web/static/css/app.scss, I will have this error :

12:28:16 - error: Compiling of css/app.scss failed. L1:50: 
   Invalid CSS after "...ication css. */": expected 1 selector or at-rule, was "add @import 'font-a" 
           
   >>  file is for your main application css. */
      ------------------------------------------^
Stack trace was suppressed. Run with `LOGGY_STACKS=1` to see the trace. 
12:28:16 - info: removed app.css and wrote 2 cached files into app.css in 303 ms
19 Jul 12:28:16 - info: [copycat] copied 0 files (1 files were not modified)
19 Jul 12:28:16 - info: [copycat] copied 0 files (6 files were not modified)

I did these :

npm install --save-dev sass-brunch
npm install --save font-awesome
npm install --save copycat-brunch
npm install --save jquery
npm install --save bootstrap
npm install --save tether (bootstrap dep)
npm install --save popper.js (bootstrap dep)

by https://gist.github.com/mbenatti/4866eaa5c424f66042e19cc055b21f83

how do I fix it?

I am not sure if you added like that. You should add like that.

@import 'font-awesome'
@import 'bootstrap'

And rename to app.scss

1 Like

Hi, now ,I rename web/static/css/app.css to web/static/css/app.scss, but :

[debug] ** (Phoenix.Router.NoRouteError) no route found for GET /css/font-awesome (TrangellHtmlSiteWeb.Router)
    (trangell_html_site_web) lib/trangell_html_site_web/router.ex:1: TrangellHtmlSiteWeb.Router.__match_route__/4
    (trangell_html_site_web) lib/phoenix/router.ex:307: TrangellHtmlSiteWeb.Router.call/2
    (trangell_html_site_web) lib/trangell_html_site_web/endpoint.ex:1: TrangellHtmlSiteWeb.Endpoint.plug_builder_call/2
    (trangell_html_site_web) lib/plug/debugger.ex:122: TrangellHtmlSiteWeb.Endpoint."call (overridable 3)"/2
    (trangell_html_site_web) lib/trangell_html_site_web/endpoint.ex:1: TrangellHtmlSiteWeb.Endpoint.call/2
    (plug) lib/plug/adapters/cowboy/handler.ex:16: Plug.Adapters.Cowboy.Handler.upgrade/4
    (cowboy) /Applications/MAMP/htdocs/elixir-ex-source/Trangell_Main/trangell_html_site_umbrella/deps/cowboy/src/cowboy_protocol.erl:442: :cowboy_protocol.execute/4

[debug] ** (Phoenix.Router.NoRouteError) no route found for GET /css/bootstrap (TrangellHtmlSiteWeb.Router)
    (trangell_html_site_web) lib/trangell_html_site_web/router.ex:1: TrangellHtmlSiteWeb.Router.__match_route__/4
    (trangell_html_site_web) lib/phoenix/router.ex:307: TrangellHtmlSiteWeb.Router.call/2
    (trangell_html_site_web) lib/trangell_html_site_web/endpoint.ex:1: TrangellHtmlSiteWeb.Endpoint.plug_builder_call/2
    (trangell_html_site_web) lib/plug/debugger.ex:122: TrangellHtmlSiteWeb.Endpoint."call (overridable 3)"/2
    (trangell_html_site_web) lib/trangell_html_site_web/endpoint.ex:1: TrangellHtmlSiteWeb.Endpoint.call/2
    (plug) lib/plug/adapters/cowboy/handler.ex:16: Plug.Adapters.Cowboy.Handler.upgrade/4
    (cowboy) /Applications/MAMP/htdocs/elixir-ex-source/Trangell_Main/trangell_html_site_umbrella/deps/cowboy/src/cowboy_protocol.erl:442: :cowboy_protocol.execute/4

there is still that problem!!

I am not familiar phoenix 1.2 folder structure. From error it is looking static directory for bootstrap and fontawesome but should look node modules folder. You can try something like that.

@import "node_modules/bootstrap/scss/bootstrap";

I did this before but it didn’t work :frowning_face:

I checked again and I saw the bootstrap was loaded in my code , but the css needs !important‍ to load.

54%20pm

phoenix css has a conflict with Bootstrap

1 Like

you can delete default phoenix css files

1 Like