Tengo un problema en el interior de mi archivo scss de controladores, continuamente tengo que marcar todo con !important para dar estilo a los elementos. Aquí hay un elemento de entrada de ejemplo en mi Map controladores scss:

.search-field {
    width: 300px !important;
    box-shadow: none !important;
    border-bottom: none !important;
    display: inline-block;
    font-size: 16px;
    margin-left: 15px !important;
}

Esto se debe a que dentro de application.scss, importé mi biblioteca de materiales que tiene prioridad sobre map.scss:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */
 @import "materialize";
 @import "font-awesome";
 * {
     font-family: 'Raleway', sans-serif;
 }

 html {
     width: 100%;
     height: 100%;
 }
 body {
     margin: 0;
     min-width: 100%;
     min-height: 100%;
     background-color: #1A1A1A;
 }

¿Cómo puedo evitar tener que usar la bandera !important en todas partes?

Editar:

También he intentado lo siguiente (sin suerte)

Dentro de application.html.erb agregué un enlace adicional a mis controladores css

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag    'map', media: 'all', 'data-turbolinks-track': 'reload' %>

Luego eliminó el uso de require_tree . dentro de application.scss

Sin embargo, cuando reinicié el servidor, aún necesitaba las etiquetas! Important. Todavia no hay suerte

0
Syntactic Fructose 11 jun. 2017 a las 04:45

2 respuestas

La mejor respuesta

Dado que es muy poco común que cada hoja de estilo en su aplicación se cargue en cada página, encontrará que importar solo lo necesario por página será mucho más eficiente, acortar los tiempos de carga y también abordar el problema de qué estilos tienen prioridad. La forma de Rails para hacer esto es eliminar las declaraciones require tree en sus archivos /application.js y /application.scss. Los únicos archivos importados en sus archivos application.js y application.scss deben ser estilos de toda la aplicación o js. Luego, agregaría las siguientes líneas a su archivo layouts/application.html.erb:

Dentro de la etiqueta <head>:

<%= stylesheet_link_tag params[:controller] if Rails.application.assets_manifest.assets["#{params[:controller]}.css"]

Esto incluirá las hojas de estilo del controlador correspondiente. Poner esto antes o después de stylesheet_link_tag para su aplicación cambia la precedencia según sus necesidades.

Luego, en su etiqueta <body> debe agregar:

 <%= javascript_include_tag params[:controller] if Rails.application.assets_manifest.assets["#{params[:controller]}.js"]

Ahora, para que esto funcione en producción para implementar su aplicación, deberá agregar los nombres de los controladores a su archivo config/initializers/assets.rb o de lo contrario obtendrá un error de que los activos no se compilaron. En ese archivo agregará lo siguiente para su controlador de mapa:

Rails.application.config.assets.precompile += %w( maps.js )

Rails.application.config.assets.precompile += %w( maps.css) #Note rails expects the css suffix and not the scss suffix here so use that and not scss even though your file may be maps.scss  

Luego, cada vez que agregue un nuevo controlador en el futuro, agregue el nombre de ese controlador a las matrices que se muestran arriba y luego ejecute bundle exec rake assets:precompile RAILS_ENV=production y estará listo. Para obtener más ejemplos, consulte mi respuesta anterior sobre básicamente el mismo problema aquí: piñones carga sass en orden aleatorio con arranque de twitter

2
bkunzi01 11 jun. 2017 a las 20:17

Mi problema fue una combinación de reglas CSS de menor prioridad agregadas al pedido de carga de la canalización de activos. Encontré que mi problema se resolvió cuando hice lo siguiente en mi archivo application.scss:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require font-awesome
 *= require materialize
 *= require_tree .
 */

 * {
     font-family: 'Raleway', sans-serif;
 }

 html {
     width: 100%;
     height: 100%;
 }
 body {
     margin: 0;
     min-width: 100%;
     min-height: 100%;
     background-color: #1A1A1A;
 }

Después pude eliminar la mayoría de las reglas !important, y descubrí que estaba usando una regla css de clase pero estaba siendo anulada por una regla input[type=text] específica, usando una ID en su lugar me permitió hacer los cambios que quería.

0
Syntactic Fructose 11 jun. 2017 a las 18:43