CSS模块化,以及错误处理

a、引入less后报错(网上有种说法用npm安装antd导致,删掉 node_modules/ 和 yarn.lock ,并且使用 yarn 重新安装依赖,没试过):
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
解决办法:降低less版本,安装大于2.7.3小于3.0.0的版本

npm install -D [email protected]

b、less模块化不起作用,可能是css-modules没配置好。以下是webpack的正确配置
c、github上less配置的方式

{ 
    test: /\.css$/, 
    use: ['style-loader', 'css-loader'] 
},
{
    test: /\.less$/,
    use: [{
            loader: 'style-loader' // creates style nodes from JS strings
          }, {
            loader: 'css-loader',  // translates CSS into CommonJS
            options: {
                sourceMap: true,
                modules: true//css模块化解决方案,利用js来管理样式依赖(css Modules)
            }
          }, {
              loader: 'less-loader', // compiles Less to CSS
              options: {
                sourceMap: true,
                strictMath: true,
                noIeCompat: true,
                javascriptEnabled:true,
                paths: [
                    path.resolve(__dirname, 'node_modules')
                  ]
              }
          }]
},

应用方法:

//less文件
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

.header {
  color: @light-blue;
  font-size: 52px;
}

//组件
import React from 'react';
import style from './Case.less';

class Case extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: null,
        };
    }

    render() {
        return 
头部文件内容
} } export default Case;

你可能感兴趣的:(CSS模块化,以及错误处理)