I bought a theme in themeforest
plan to put it in my phoenix application.
How do I put?
Currently I put in my assets/app.css several
@import
@import
But this is causing a lot of slowness …
Not to mention that the CSS of the screen, it is all mangled.
How do do in this case?
Could give me some examples?
Note:
Phoenix Used is 1.4.10
Hi @gilbertosj, aren’t themes from themeforest for wordpress?
no, there you can buy themes for everything you need … the theme is html
It is not that easy to integrate templates made by others, but here are some advices.
- Do not bundle templates files, but put them in assets/static, and reference them in templates.
- Create a theme helper, that will help You transform dynamic parts into compatible html, from any views.
- If needed, add bootstrap, jquery and what not and use webpack provide plugin.
How do I get all the css found in the folder
assets/css
Be sent to the priv/static/css folder when compiling?
Would anyone have a webpack model?
I’m currently using this …
const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = (env, options) => ({
optimization: {
minimizer: [
new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
new OptimizeCSSAssetsPlugin({})
]
},
entry: {
// './js/app.js': glob.sync('./vendor/**/*.js').concat(['./js/app.js'])
"./js/app.js": ["./js/app.js"].concat(glob.sync("./vendor/**/*.js"))
},
output: {
// filename: 'app.js',
// path: path.resolve(__dirname, '../priv/static/js')
filename: "app.js",
path: path.resolve(__dirname, "../priv/static/js"),
publicPath: "/js/"
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: '../fonts'
}
}]
},
{
test: /\.((2)?jpeg|jpg|png)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: '../images'
}
}]
}
]
},
plugins: [
new MiniCssExtractPlugin({ filename: '../css/app.css' }),
new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
]
});
Just add them into assets/static/css… they would be copied by copy_webpack_plugin.
2 Likes
Thank you very much, I didn’t know that.
Now I can work.
Just wanted to share my experience as I wanted to use a legacy themeforest theme with my Elixir Phoenix project.
My first issue was trying to use webpack to bundle everything into app.css
and app.js
did not work. I ended up creating a folder inside assets/static
that had all my theme assets and dependencies. Then inside endpoint.ex
I whitelisted my theme folder so that it can be accessed by Static Route Path.
plug Plug.Static,
at: "/",
from: :spork,
gzip: false,
only: ~w(css fonts images js favicon.ico robots.txt <THEME_FOLDER>)
What this does is allows access to the above assets with a public static route.
Then I just followed the old skool method of importing them in via script tags. Many templates actually have a sample template that lists what needs to be imported in and in what order