Могу ли я импортировать файл scss, используя инструкцию 'composes' с помощью Webpack?

В настоящее время я изучаю CSS-модули, и они выглядят так, как будто они решат множество проблем. Но вся документация основана на CSS, я хочу использовать SASS.Могу ли я импортировать файл scss, используя инструкцию 'composes' с помощью Webpack?

Возможно ли это? Например, как я могу заставить следующую инструкцию работать?

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

источник

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; 
}

модуль часть в ваших 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' 
       } 
      ] 
     } 
    ] 
}

Ваш 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>

точка входа app.js

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

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

// UPDATE

новообращенный WebPack конфигурация для WebPack 3
делает teststyle.js без гражданства функции

источник

2016-06-08 18:56:01 Phil

Эй @phil, спасибо за ваш ответ. Единственное, что вы используете, это выражение «составные» для расширения класса CSS, находящегося в одном файле. Можно ли использовать его для ссылки на другой файл .scss? например _compos: primary из "../shared/colors.scss";_ – simbro

Могу ли я импортировать файл scss, используя инструкцию 'composes' с помощью Webpack?

ответ

Смежные вопросы