美文网首页
CSS模块化,以及错误处理

CSS模块化,以及错误处理

作者: 天天开恩 | 来源:发表于2018-10-22 14:03 被阅读0次

    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 less@2.7.3
    

    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 <div className={style.header}>
                头部文件内容
            </div>
        }
    }
    
    export default Case;
    

    相关文章

      网友评论

          本文标题:CSS模块化,以及错误处理

          本文链接:https://www.haomeiwen.com/subject/yyqgzftx.html