我可以導入scss文件在Webpack中使用'composes'語句嗎？

我現在正在學習CSS模塊，看起來他們會解決很多問題。但所有文檔都基於CSS，我想使用SASS。我可以導入scss文件在Webpack中使用'composes'語句嗎？

這可能嗎？例如，我怎樣才能使以下聲明有效？

.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 config來的WebPack 3
化妝teststyle.js無國籍功能

來源

2016-06-08 18:56:01 Phil

嘿@phil，你的答案感謝。唯一的是，您正在使用'composes'語句來擴展同一個文件中的CSS類。是否有可能使用它來引用另一個.scss文件？例如_composes：主從「../shared/colors.scss";_ – simbro

我可以導入scss文件在Webpack中使用'composes'語句嗎？

回答

相關問題