Hello , I have updated phoenix css to bootstrap4, but some bootstrap4’s css doesn’t load in my phoenix project, for example in phoenix
in html file
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 Installing Bootstrap 4 + Font Awesome from NPM in Phoenix Framework using sass · GitHub
how do I fix it?
