aniftyco-archive / semantic-ui-sass Goto Github PK
View Code? Open in Web Editor NEWSemantic UI, converted to Sass.
Home Page: https://semantic-ui.com/
License: MIT License
semantic-ui-sass's People
Contributors
Stargazers
Watchers
Forkers
robbie-inquisicorp maxcreation chatcamp ummahusla binkydog heyogrady shubh22 ekaterinashenets appbisweb fabriciofeliciano whitebyte maatticlabssemantic-ui-sass's Issues
Compiling scss, Invalid US-ASCII character
When building scss with a Symfony 3 project and assetic, the build fail because of missing @charset "UTF-8"; in .scss files that uses UTF-8 chars.
[error] An error occurred while running:
'/usr/bin/ruby' '/usr/local/bin/sass' '--load-path' '/var/www/html/src/PapsOu/LibBundle/Resources/semantic-ui' '--scss' '--load-path' '/var/www/html/app/../web' '--cache-location' '/var/www/html/var/cache/dev' '/tmp/assetic_sass9FopEG'
Error Output:
Error: Invalid US-ASCII character "\xE2"
on line 561 of /var/www/html/src/PapsOu/LibBundle/Resources/semantic-ui/scss/elements/_list.scss
from line 10 of /var/www/html/src/PapsOu/LibBundle/Resources/semantic-ui/scss/elements/_all.scss
from line 2 of /tmp/assetic_sass9FopEG
Use --trace for backtrace.
Input:
@import 'scss/globals/all';
@import 'scss/elements/all';
@import 'scss/collections/all';
@import 'scss/views/all';
@import 'scss/modules/all';Is it possible that you add @charset "UTF-8"; in every files to solve this kind of problem ?
I did following commands to install the semantic scss theme :
npm install semantic-ui-sass
cd src/PapsOu/LibBundle/Resources/semantic-ui
ln -s ../../../../../node_modules/semantic-ui-sass/* ./
bin/console assetic:dump # Symfony console command that execute the ruby sass command.You can see in the file elements/_list.scss that there is a UTF-8 char in the content key :
ul.ui.list li:before,
.ui.bulleted.list .list > .item:before,
.ui.bulleted.list > .item:before {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
position: absolute;
top: auto;
left: auto;
font-weight: normal;
margin-left: -1.25rem;
content: '•';
opacity: 1;
color: inherit;
vertical-align: top;
}So the @charset "UTF-8"; is really needed, and other files trigger the error (unfortunately, I don't have the list).
File to import not found or unreadable: semantic-ui.
I'm getting that error File to import not found or unreadable: semantic-ui. when i try to run webpack dev server. I just followed the CSS part of README.
Here's my code:
Sass:
// main.css
@import "semantic-ui";
React:
require('./stylesheets/main.scss');
const App = () =>
(
<div>
<h1>{APP_NAME}</h1>
<Message />
<HelloButton />
</div>
);
export default App;
Webpack:
module: {
rules: [
....
{
test: /\.scss$/,
use: [{
loader: 'style-loader', // creates style nodes from JS strings
}, {
loader: 'css-loader', // translates CSS into CommonJS
}, {
loader: 'sass-loader', // compiles Sass to CSS
}],
},
],
},
Import in scss not working
I had to use @import 'semantic-ui-sass'; instead of @import 'semantic-ui'; as in the description
Fonts not found/fonts imported even with $import-google-fonts: false;
I'm trying to add your package to a small vue.js application
<style lang="scss">
$import-google-fonts: false;
@import "semantic-ui-sass";
</style>
and I get the following errors:
> vue-cli-service serve
INFO Starting development server...
10% building 2/2 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /home/tc/progr/comment-world/fomantic-ui-vue/docs/public
ℹ ｢wds｣: 404s will fallback to /index.html
98% after emitting CopyPlugin
ERROR Failed to compile with 15 errors 6:25:57 PM
These relative modules were not found:
* ../../icons/brand-icons.eot in ./node_modules/@vue/cli-service/node_modules/css-loader??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss&
* ../../icons/brand-icons.svg in ./node_modules/@vue/cli-service/node_modules/css-loader??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss&
* ../../icons/brand-icons.ttf in ./node_modules/@vue/cli-service/node_modules/css-loader??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss&
It seams to me that there are two problems
- the fonts are not found
- the compiler (webpack?) looks for the fonts also I gave the directive
$import-google-fonts: false;
Am I doing something wrong?
Replace more parts of sass with variables, such as colors.
Since it's impossible to have an exact port of Semantic to Sass, we don't get all the benefits of it, so my attempt with this is to make more stuff configurable with variables by finding things and replacing them with variables, such as brand colors, padding, etc.
How to include another theme
Hey @joshmanders, do you plan to add other themes into this distribution?
Is there a way to achieve that, if I need to use another theme with this SASS package?
Looking for maintainer
I no longer use Semantic-UI therefore I don't keep up to date on it and it's causing this library to suffer. If anyone is willing to step up and take control of it, I'm more than willing to allow that.
No columnCount variable?
I'm looking to change the column count from 16 to 12, the variable in less is @columnCount, I'm looking for something like $columnCount but it doesn't seem to exist.
Compass function produces invalid CSS
Flags don't seem to be working because of this line:
https://github.com/aniftyco/semantic-ui-sass/blob/master/scss/elements/_flag.scss#L34
The culprit is image-url Compass function. Should probably be:
background: url("#{$flags-image-path}/flags.png") no-repeat -108px -1976px;Thanks for a great library btw :)
upgrade to new semantic-ui versions
There are many fixes that have been brought to semantic-ui. Could you please upgrade ?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.