I am using ember-cli-sass instead of broccoli-ruby-sass
These are the steps i have done
npm install --save-dev ember-cli-sass
bower install --save foundation
I am getting this error in the console after i started the ember server
I don't understand why it says "File not found: /app/styles/app.scss"
i don't have any app.scss a part from
I am missing something in the configuration, what's the problem exactly?
I am using three sass file
_global.sass
_music.sass
_player.sass
i import them in app.sass
#import global
#import player
#import music
i was reading the https://www.npmjs.com/package/ember-cli-sass and it says
Specify some include paths in config/environment.js:
ENV.sassOptions = {
includePaths: [
'bower_components/foundation/scss'
]
}
I am bit confused about these settings, i need some advices
I think you are getting the error because you may not have changed the name of your app.css file to app.scss
You your app/styles folder you should have a file called app.scss in that file I would put your imports
// app.scss
#import 'foundation';
#import 'global';
#import 'player';
#import 'music';
Then you need to add:
ENV.sassOptions = {
includePaths: [
'bower_components/foundation/scss'
]
}
To your config/environment.js like this:
module.exports = function(environment) {
var ENV = {
modulePrefix: 'test-sass',
environment: environment,
baseURL: '/',
locationType: 'auto',
sassOptions: {
includePaths: [
'bower_components/foundation/scss'
]
},
EmberENV: {
FEATURES: {
.....
If you are looking to use foundation in your ember-cli app use the ember-cli addon: https://www.npmjs.com/package/ember-cli-foundation-sass
I think ember-cli-sass by default looks for sass files with extension .scss. If you are using file extension of .sass, you need to specify it in sassOptions.
ENV.sassOptions = {
includePaths: [
'bower_components/foundation/scss'
],
extension: 'sass'
}
Check https://github.com/aexmachina/ember-cli-sass
Related
UPDATE 2021 March 29 : There is a known issue here
How to make pylint-django work together with django-configurations ?
I've setup a Django project in VS code with pylint and django-pylint as linter.
I have a conflict with django-configurations, a package that I use to have different config file depending on environment.
I specify django-settings-module in order for django-pylint to understand django project.
Settings.json in vscode looks like this :
{
// ...
"python.linting.pylintArgs": [
"--load-plugins", "pylint_django", // Works fine
// "--django-settings-module", "project.settings" // Do not work anymore when adding this
],
],
// ...
}
Also I've tried the same config file with another django project that does not use django-configurations and pylint django works well with second line on.
I managed to make this work with this format:
{
"python.linting.pylintArgs": [
"--load-plugins",
"pylint_django",
"--django-settings-module=project.settings"
]
}
I am attempting to add the cypress-angular-unit-test plugin to Cypress.
However, following the instructions provided on the related GitHub page I am getting the following error:
The plugins file is missing or invalid.
/MyProjectName/cypress/plugins/index.js:1
import * as cypressTypeScriptPreprocessor from 'cy-ts-preprocessor';
^^^^^^
SyntaxError: Cannot use import statement outside a module
Again, as instructed, I have added the following to support/index.js
// core-js 3.*
require('core-js/es/reflect');
// core-js 2.*
require('core-js/es7/reflect');
require('cypress-angular-unit-test/support');
And the following to plugins/index.js
import * as cypressTypeScriptPreprocessor from 'cy-ts-preprocessor';
module.exports = (on, config) => {
on('file:preprocessor', cypressTypeScriptPreprocessor);
require('#cypress/code-coverage/task')(on, config);
return config;
};
I've also added the related helper.js and cy-ts-preprocessor.js file to the plugins folder.
I've also added the necessary config to cypress.json
"experimentalComponentTesting": true,
I've even tried adding types/node by adding a tsconfig.json to the cypress folder like so:
{
"compilerOptions": {
"target": "es5",
"lib": ["es5", "dom"],
"types": ["cypress", "node"],
"experimentalDecorators": true
},
"include": [
"**/*.ts"
]
}
Changing the target and/or lib values to es6 has no effect.
Changing the import to a require yields a different error which, even if it did work, seems like a hacky solution for some detail I am missing.
¯\_(ツ)_/¯
Not exactly an answer but at least a work around.
Start fresh or uninstall Cypress and cypress-angular-unit-test
Follow the instructions for Nx Cypress install found on here
Go back to cypress-angular-unit-test instructions and ignore this part:
Configure cypress/plugins/index.js to transpile Angular code.
import * as cypressTypeScriptPreprocessor from './cy-ts-preprocessor';
module.exports = (on, config) => {
on('file:preprocessor', cypressTypeScriptPreprocessor);
return config;
};
The file cy-ts-preprocessor is here
I've been trying to set up a React component inside Django with the help of Webpack 4.
To get me starting I went through and read:
Using Webpack transparently with Django + hot reloading React components as a bonus
Tutorial: Django REST with React (Django 2.0 and a sprinkle of testing)
Both these walkthroughs are great. At last, I got it almost working by following the second link even though I use Django 1.11.
The problem I had after following the second link was that hot reloading does not work when using a webpack-dev-server. The problem is that Django cannot read the output file of the webpack-dev-server (gives 404 error) while the main.js can be read. I've read that the dev-server files do only live in memory by default.
To overcome the issue with error 404 on the hot reload files I installed the package write-file-webpack-plugin to write out the file each reloads. Then changed the webpack-config.js to (I deleted some lines to keep it shorter....):
var path = require('path');
//webpack is not needed since I removed it from plugins
//const webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');
var WriteFilePlugin =require('write-file-webpack-plugin');
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
]
},
entry: [
'./frontend/src/index',
],
output: {
path: path.join(__dirname, 'frontend/static/frontend'),
// Changing the name from "[name]-[hash].js" to not get 1000 files in the static folder.
filename: 'hotreloadfile.js'
},
plugins: [
//This line writes the file on each hot reload
new WriteFilePlugin(),
//This can be removed.
//new webpack.HotModuleReplacementPlugin(),
new BundleTracker({filename: './webpack-stats.json'})
],
mode:'development',
};
in my package.json I have the follow line among the script tag:
"start": "webpack-dev-server --config ./webpack.config.js",
And in Django I installed webpack-loader with the following lines in settings.py:
STATIC_URL = '/static/'
WEBPACK_LOADER = {
'DEFAULT': {
'BUNDLE_DIR_NAME': 'frontend/',
'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json')
}
}
Finally, in my root component called index.js, I do not need the module.hot.accept(); line
Do you see any drawbacks to this approach? Except that I had to install another package?
Why didn't I get it to work with new webpack.HotModuleReplacementPlugin()?
Here is another approach if you develop frontend in react and backend in django.
I have django server running on port 8000 and react server running on port 3000.
If I add "proxy": "http://localhost:8000" line in package.json of react code, localhost:3000 will do hot-reloading while api call goes to localhost:8000.
I am learning to integrate Vue.js in to a Django project (multi-page application). My goal is to be able to split my frontend code up among my different apps within my project
However, I am unable to create a Vue instance from my profiles app because webpack fails to find Vue during import.
The error
ERROR in ../apps/profiles/frontend/profiles/browse.js
Module not found: Error: Can't resolve 'vue' in '/home/me/dev/myproject/apps/profiles/frontend/profiles'
My django project structure (truncated)
manage.py
myproject/
webpack.config.js
frontend/
home.js
components/
Home.vue
node_modules/
apps/
profiles/
frontend/
profiles/
browse.js
Multiple entry points in webpack.config.js
entry: {
'vendor': [
"vue",
"vue-resource",
],
'home': [
'./frontend/home.js',
'webpack/hot/only-dev-server',
'webpack-dev-server/client?http://' + dev_server_addr + ':' + dev_server_port,
],
'profiles_browse': [
'../apps/profiles/frontend/profiles/browse.js',
'webpack/hot/only-dev-server',
'webpack-dev-server/client?http://' + dev_server_addr + ':' + dev_server_port,
],
},
Also vue is resolved as an alias in webpack.config.js
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js',
},
},
My browse.js Vue instance
import Vue from 'vue' <-- Error occurs here
new Vue({
el: '#browse',
data: {
foobar: "hello browse"
},
delimiters: [
"[[", "]]"
]
});
And finally my django template for profiles browse
<div id="browse">
[[ foobar ]]
</div>
{% render_bundle 'vendor' %}
{% render_bundle 'profiles_browse' %}
I had thought that since vue has an alias defined that I would be able to import it from anywhere.
Does anyone have any suggestions on how to best use webpack to split up modules spanning different directories within a project?
A successful approach that I discovered from a blog post is to use npm to install my Django app's js modules into my project's node_modules directory.
For instance, in my project's package.json I add the following file reference to my dependencies:
"dependencies": {
"profiles": "file:../apps/profiles/frontend",
...
},
This will work if apps/profiles/frontend has defined its own package.json file.
Now my project's webpack.config.js entry points will be:
entry: {
'vendor': [
"vue",
"vue-resource",
],
'home': [
'./frontend/home.js',
'webpack/hot/only-dev-server',
'webpack-dev-server/client?http://' + dev_server_addr + ':' + dev_server_port,
],
'profiles_browse': [
'./node_modules/profiles/browse.js',
'webpack/hot/only-dev-server',
'webpack-dev-server/client?http://' + dev_server_addr + ':' + dev_server_port,
],
},
Notice that profiles_browse refers to a file within node_modules.
Within my browse.js files I can import Vue without error.
I have installed Bourbon with Bower, but cannot get broccoli-sass to import Bourbon. Broccoli-sass is compiling my app.scss file to app.css.
I have tried
#import '_bourbon';
and
#import 'bourbon';
at the top of my app.scss file but get the error:
Error: file to import not found or unreadable: _bourbon
My brocfile:
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var compileSass = require('broccoli-sass');
var app = new EmberApp();
var sassImportPaths = [
'app/styles',
'bower_components/bourbon/app/assets/stylesheets',
];
var appCss = compileSass(sassImportPaths, 'app.scss', '/assets/app.css');
module.exports = app.toTree([appCss]);
No need to import it in your Brocfile. You can simply add Bourbon as a dependency in your app.scss:
#import "bower_components/bourbon/app/assets/stylesheets/bourbon.scss";
If you look at this file you will see that it contains all the necessary imports.