I'm trying to set a 4-column card view with this: Card Columns
Here is a successful online example: DEMO
I followed this tutorial to setup Django compressor.
I have following code in main.scss file:
#import 'bootstrap';
.card-columns {
#include media-breakpoint-only(lg) {
column-count: 4;
}
#include media-breakpoint-only(xl) {
column-count: 5;
}
}
And I can't import Bootstrap. I tried to put the bootstrap.css in the same folder but the system pops the error says:
Error: no mixin named media-breakpoint-only
I'm kind of new to this. How do I fix it? Thanks.
I believe you should put this into your settings.py file:
COMPRESS_PRECOMPILERS = (
('text/x-sass', 'sass main.scss output_file.css')
)
in order for the compressor to "precompile" your .scss file.
Related
I am having an issue trying to load the most basic custom mapping in React Native Web. The custom styles are loading just fine in the App, but not Web. Using the latest version with the babel loader hack as proposed here. I am using the default mapping as proposed in the UI Kitten docs for v5.x
My code looks like this:
import * as eva from '#eva-design/eva'
import * as mapping from '../styles/mapping.json'
import { myTheme } from '../styles/light-theme'
export default function App(): React.ReactElement {
return <>
<ApplicationProvider {...eva} theme={myTheme} customMapping={mapping}>
...
</ApplicationProvider>
</>
}
I tried replicating with a blank repo and it was working fine, so one line at a time I figured out that my import was not correct (not readable by babel?).
Instead of:
import * as mapping from '../styles/mapping.json'
Should be:
import {default as mapping} from '../styles/mapping.json'
The correct way is suggested in the UIKitten docs, so I don't think it will happen to many, but may help others as it's not an obvious thing if someone is working with the App emulator for the most time and not checking the Web until later.
This is the way I use the custom mapping with ts file: custom-mapping.ts
export const customMapping: any = {
components: {
CircleButton: {
meta:{...},
appearances: {...}
}
}
}
and import it like this:
...
import {customMapping} from '../custom-mapping';
<ApplicationProvider
...
customMapping={{...eva.mapping, ...customMapping}}
>
{children}
</ApplicationProvider>
In my project, I used eslint-import-resolver-alias for imports like below in .eslintrc:
{
"settings":{
"alias": [
["pckg", "pckg/src"]
]
}
}
And I use as below in my .js files
import pckg from 'pckg'
But when I try to find the declaration using a Cmd+Click by clicking on 'pckg' in the import statement, WebStorm says that there is no declaration to go to. I realize that WebStorm is not able to understand the import alias resolver plugin, but is there anyway to make it work
You can try using webpack aliases instead: create a dummy webpack configuration file with aliases like
...
alias: {
'pckg': path.resolve(__dirname, './pckg/src'),
},
...
and specify a path to it in Settings | Languages & Frameworks | JavaScript | Webpack, or use a workaround from https://youtrack.jetbrains.com/issue/WEB-22717#focus=streamItem-27-1558931-0-0:
create a file config.js (you can use a different name if you like) in your project root dir
define your aliases there using the following syntax:
System.config({
"paths": {
"pckg/*": "./pckg/src/*"
}
});
I'm trying to use TailwindCSS in my ember app and I ended up using this add-on to do this. But unfortunately some other add-ons require to include their 'scss' files to app styles. So I tried to add 'postcss-sass' to make it work. But it doesn't want to work with "#apply" command. Is it possible to use postcss and sass and #apply command at the moment?
My ember-cli-build.js:
postcssOptions: {
compile: {
extension: 'scss',
enabled: true,
parser: require('postcss-scss'),
plugins: [
{
module: require('#csstools/postcss-sass'),
options: {
includePaths: ['node_modules']
}
},
require('tailwindcss')('./app/tailwind/config.js'),
...isProduction ? [purgeCSS] : []
]
}
}
And I'm getting an error: UnhandledPromiseRejectionWarning: Error: Invalid mapping: {"generated":{"line":53,"column":-1},"source":"../../out-338-broccoli_merge_trees_full_application/app/styles/app.scss","original":{"line":52,"column":25},"name":null}
This is precisely where #apply appeared the first time.
It turned out the problem was with a missing semicolon in "app.scss". It worked fine when it was a plain css, and stopped working when I converted it to SASS.
Ember CLI docs says about /app/styles folder following:
Contains your stylesheets, whether SASS, LESS, Stylus, Compass, or plain CSS (though only one type is allowed, see Asset Compilation). These are all compiled into app.css.
I have the following files in /app/styles: app.css, one.css, two.css.
I would expect when starting server that in folder /dist/assets there will be file called appName.css and the content would be concatenation of all three files. Instead there is only content of app.css file. So I resolved this with #import in app.css:
#import url("one.css");
#import url("two.css");
That worked with 0.0.46, although not optimal because of more request were made to server. Now I updated to 0.1.1 and files one.css and two.css are no longer copied to /dist/assets folder.
But main question is: How can I achieve the concatenation of all css files in /app/styles folder? Am I missing something basic or are there some commands needed to be included into Brocfile.js?
Updated
Here is the snippet of Brocfile.js showing how we concatenate our CSS files:
var concat = require('broccoli-concat');
var cleanCSS = require('broccoli-clean-css');
var concatenatedCss = concat('app/styles', {
inputFiles: [
'reset.css',
'common.css',
'layout.css',
...
],
outputFile: '/assets/appName.css',
wrapInFunction: false
});
if (app.env === 'production') {
concatenatedCss = cleanCSS(concatenatedCss, {restructuring: false});
}
module.exports = app.toTree([concatenatedCss]);
We manually add files to inputFiles array.
It's known issue with 0.1.1 version: Static css compiler broken (0.1.x regression)
You probably should wait for update.
As for main question, try broccoli-concat.
Now there is this ember-cli-concat add-on available: https://github.com/sir-dunxalot/ember-cli-concat.
Looks super easy to use: https://github.com/sir-dunxalot/ember-cli-concat/wiki/Installation
I'm using django-pipeline to minify my CSS. Everything minifies correctly until I use PipelineCachedStorage so I can get the versioned, cache-busting filenames. I get the following error:
ValueError: The file 'img/glyphicons-halflings.png' could not be found with <pipeline.storage.PipelineCachedStorage object at 0x19069d0>
I've grepped all the files in my project and have found that this PNG is in bootstrap.css, but I am not including that file to be minified. Here's my django-pipeline specific settings:
PIPELINE_CSS = {
'ab': {
'source_filenames': (
'main.css',
'segment-animation.css',
),
'output_filename' : 'ab.css',
}
}
PIPELINE_YUGLIFY_BINARY = '/home/redacted/ts/redacted/node_modules/yuglify/bin/yuglify'
STATICFILES_STORAGE = 'pipeline.storage.PipelineCachedStorage'
Thanks in advance!
EDIT:
new settings for pipeline:
PIPELINE_COMPILERS = (
'pipeline.compilers.less.LessCompiler',
)
PIPELINE_CSS = {
'ab': {
'source_filenames': (
'bootstrap-less/bootstrap.less',
'main.css',
'segment-animation.css',
),
'output_filename' : 'ab.css',
}
}
PIPELINE_YUGLIFY_BINARY = '/home/redacted/ts/redacted/node_modules/yuglify/bin/yuglify'
STATICFILES_STORAGE = 'pipeline.storage.PipelineCachedStorage'
The error isn't entirely related to Pipeline but rather what Django's CachedStaticFilesStorage that PipelineCachedStorage extends. The cached storage will look for file references in your css files and replace url('asset-link') and #import 'resource-link' with the appropriate link to the version with the md5 hash appended to it.
This will turn url('img/glyphicons-halflings.png') into url('img/glyphicons-halflings.<hash>.png'). So if you have asset references in your css files but don't have the underlying assets, the post_process() of CachedStaticFilesStorage is going to throw that error.
You can read more here. I'd recommend to compile the less version of bootstrap with django pipeline and remove the less components that you don't need, such as the icons if you don't want to include the bootstrap icons. Or you can include the appropriate assets.
I've found the django-pipeline-forgiving package resolves this issue with the stock Django CachedStaticFilesStorage / PipelineCachedStorage very nicely