Puis-je importer le fichier scss utilise l'instruction 'composes' avec Webpack?

Je suis en train d'apprendre à propos des modules CSS pour le moment, et ils semblent résoudre beaucoup de problèmes. Mais toute la documentation est basée sur CSS, je veux utiliser SASS.Puis-je importer le fichier scss utilise l'instruction 'composes' avec Webpack?

Est-ce possible? Par exemple, comment pourrais-je faire fonctionner l'instruction suivante?

.normal { 
    composes: common; 
    composes: primary from "../shared/colors.scss"; 
}

Source

2016-06-08 simbro

./scss/import.scss

.myImportClass { 
    background-color: #f00 
}

./scss/style.scss

.btn { 
    padding: 20px; 
    border: 1px solid #000; 
} 

.newBtn { 
    composes: btn; 
    composes: myImportClass from './import.scss'; 
    border: 5px solid #f00; 
}

partie du module dans votre webpack.config.js

module: { 
    rules: [ 
     { 
      test: /\.scss/, 
      use: [ 
       { 
        loader:'style-loader' 
       }, 
       { 
        loader: 'css-loader', 
        options: { 
         sourceMap: true, 
         modules: true, 
         localIdentName: '[name]__[local]__[hash:base64:5]' 
        } 
       }, 
       { 
        loader: 'sass-loader' 
       } 
      ] 
     } 
    ] 
}

Votre teststyle.js (ES6/ES7):

import React from 'react'; 
import style from './scss/style.scss'; 

const TestStyle =() => { 
    render() { 
     return (<div> 
       <button className={style.newBtn}>my button</button> 
     </div>) 
    } 
} 

default export TestStyle;

index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>webpack CSS composes</title> 
</head> 
<body> 
    <div id="app"></div> 
</body> 
</html>

point d'entrée app.js

import React from 'react'; 
import TestStyle from './teststyle'; 

React.render(
    <TestStyle />, 
    document.getElementById('app') 
);

// Mise à jour

convertir webpack config webpack 3
faire teststyle.js fonction sans état

Source

2016-06-08 18:56:01 Phil

Hey @phil, merci pour votre réponse. La seule chose est, vous utilisez l'instruction 'composes' pour étendre une classe CSS qui se trouve dans le même fichier. Est-il possible de l'utiliser pour référencer un autre fichier .scss? par exemple. _composes: primaire à partir de "../shared/colors.scss";_ – simbro

Puis-je importer le fichier scss utilise l'instruction 'composes' avec Webpack?

Répondre

Questions connexes