Question

我必须使用classNames，如下所示

import style from './style.scss' 

class MyComponent extends Component {

  render() {
    return <button className="my-button">OK</button>;
  }
}

通常我们正在使用style['my-button']是否有可能避免使用上述对象样式并使用？

Answer 1

您只需导入样式表：

import './style.scss';

Answer 2

我相信这个webpack配置可以帮到你。它允许您按照上面的建议使用类。

确保在更改配置后重建。我们都忘了......

注意： webpack.config.js下面的代码是片段，因此请务必阅读我的评论。

/**
* webpack.config.js
*/

// ADD THE ExtractTextPlugin
var ExtractTextPlugin = require('extract-text-webpack-plugin')

// ADD THIS TO YOUR PLUGINS ARRAY
new ExtractTextPlugin('[your-css].css')

// ADD THIS TO YOUR module.loaders ARRAY
{
    // sass -to-> css
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract(
        'style', // The backup style loader
        'css?sourceMap!sass?sourceMap'
    )
}

/**
* react file
*/
import style from './[path]/[your-css].css.scss'

... use your classes as normal ...

Answer 3

只是导入文件应该可以正常工作，但如果没有，你必须检查你的webpack.config - 在我的情况下（webpack 2），这就是我需要处理的sass样式（单一规则）：

import { greenBck, btnShadow } from '../styles/main.scss';

const MyButton = () => {
  return (
    <button className="btn greenBck btnShadow">GreenButton</button>
  );
}

导入样式的其他方法，如果只需要几个类，则使用es2015语法导入它们：

/* NAVIGATION */

.navigation {
  float: none;
  background: #fff;
  overflow: hidden;
  display: inline;
  padding: none;
  margin: 20px 0;
}

.navigation ul li {
  display: inline;
  margin: 0;
  box-sizing: border-box;
}

.navigation ul li a {
  float: none;
  display: inline;
  text-decoration: none;
  color: #008ED4;
  padding: 15px 20px;
  text-align: center;
  font-weight: 700;
  -webkit-transition: ease-in 0.4s, ease-out 0.2s;
  /* Safari */
  transition: ease-in 0.4s, ease-out 0.2s;
}

.navigation ul li a:hover {
  display: inline;
  background: #008ED4;
  margin: 0px;
  padding: 15px 20px;
  color: #fff;
  box-sizing: border-box;
}

.navigation ul li:hover {
  display: inline;
  margin: 0px;
  padding: 0;
  box-sizing: border-box;
}

.navigation-breadcumb {
  display: none;
}

.navigation-lines {
  border-top: 2px solid #008ED4;
  border-bottom: 2px solid #008ED4;
  padding: none;
}

如何在不使用任何对象webpack sass loader的情况下使用sass类名？

3 个答案: