style-loader/useable 不起效果

Question

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

const path = require('path'); const HTMLWebpackPlugin = require('html-webpack-plugin');   module.exports = {   entry: {     app: path.join(__dirname, 'src/app.js'),   },   output: {     filename: '[name].bundle.js',     chunkFilename: '[name].chunk.js',     path: path.join(__dirname, 'dist'),     // publicPath: "dist",   },   devServer: {     contentBase: './dist',     // hot: true,   },   devtool: 'inline-source-map',   module: {     rules: [       {         test: /\.css$/,         use: [           {             loader: 'style-loader/useable',           },           {             loader: 'css-loader',           },         ],         exclude: /node_modules/,       },         {         test: /\.(js|jsx)$/,         use: 'babel-loader',         exclude: /node_modules/,       },     ],   },   plugins: [     new HTMLWebpackPlugin({       template: path.join(__dirname, 'src/index.html'),     }),   ], };

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

import React, { Component } from 'react'; import style from './index.css';   style.use(); let flag = true;   setInterval(() => {   // console.log('f', style)     flag ? style.ref() : style.unref();   flag = !flag; }, 1000);   class Test extends Component {   render() {     return (<div className="test">       this is div     </div>);   } }   export default Test;

这里有什么问题吗，我use/ref都不行

Answer 1

提问者 慕用8116058 2018-01-13 22:58:46

我找到问题了，因为我先调用了一次use方法，然后setinterval的时候又先use然后unuse导致一直不能产生动画效果，多谢老师

• qbaty #1

  好的，我还特意试了你的案例，普通样式好像也没有问题，是动画的话对样式载入的时机有影响

Answer 2

qbaty 2018-01-13 22:56:46

你的css 是怎么载入的？你的html 模版里是怎么写的？