Importing Custom Theme for phoenix 1.4.10

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