css - 如何将主 .scss 文件加载到 Webpack 3.6~ 和 React

Question

我花了最后几个小时试图让一组现有的 SCSS 文件在 React 元素中工作，但我似乎无法让它使用它们。

我之前使用 CDN 提供的样式运行一个相当简约的 Webpack 配置，所以我还没有完全自定义。

1. 我的主要问题是 CSS 无法正常工作。
2. 此元素目前正在编译，没有问题。

这是我当前的文件:

./webpack.config.js

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: ['./src/index.js'],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  devtool: 'inline-source-map',
  module: {
    loaders: [
      {
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: { presets: ['react', 'es2015', 'stage-1'] }
      },
      {
        test: /\.(png|jpg)$/,
        loader: 'url-loader?limit=8192'
      },
      // {
      //     test: /\.css$/,
      //     use: ['style-loader', 'css-loader']
      // },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'css-loader',
            'postcss-loader',
            'sass-loader'
          ]
        })
      }
    ]
  },
  plugins: [
      new ExtractTextPlugin({
          filename: 'css/[name]-[chunkhash].css',
          disable: false,
          allChunks: true
      }),
  ],
  resolve: {
    extensions: ['.js', '.jsx']
  },
  devServer: {
    hot: false,
    historyApiFallback: true,
    contentBase: './',
    port: 80
  }
};

./postcss.config.js

这只是实验垃圾。我稍后会回来讨论它。

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

./index.html

我的根 html 文件中与 CSS 或 SCSS 没有任何关系，这可能是问题的一部分。如果是这样，我不知道该怎么办。

./src/index.js

// ... ✂ ...

const Root = () => (
  <ApolloProvider store={store} client={client}>
    <Router history={history}>
      <Route path="/" component={App} />
    </Router>
  </ApolloProvider>
)

ReactDOM.render(
  <Root />,
  document.querySelector('#root')
)

./src/components/App.js

export default ({ match: { url } }) => {
  return (
    <div id="container">
      <Header />
      <Switch>
        <Route path={`${url}login`} component={LoginForm} />
        <Route path={`${url}logout`} component={LogOut} />
        <Route path={`${url}signup`} component={SignUp} />
        <Route path={`${url}dashboard`} component={requireAuth(Dashboard)} />
        <Route path={`${url}profile/edit`} component={requireAuth(ProfileEdit)} />
        <Route path={`${url}profile`} component={requireAuth(Profile)} />
      </Switch>
    </div>
  )
}

./src/components/auth/LoginForm.js

// ... ✂ ...

import '../../../styles/app.scss'

class LoginForm extends Component {
  render() {
    return (
      <div className="row">
        <div className="full-row">what</div>
      </div>
    )
  }
}

export default LoginForm

上面的文件是我要说明问题的地方。您可以看到其中使用了 className="row" 和 className="full-row"，我正在导入 '../../../styles/app.scss' 其中包含该 CSS:

.full-row {
  @include flex(column);
  align-items: center;
  width: 100%;
  height: 57.6rem;
  background: yellow;
}

.row {
  @include flex(column);
  align-items: center;
  min-width: 102.4rem;
  background-color: pink;
}

我只想看到黄色和粉红色，这样我就知道 SCSS 已连接。

Is my webpack.config.js file screwed up?

Is the way I am trying to import SCSS in LoginForm.js incorrect?

Does my index.html file need anything to make this work?

I have not compiled any SCSS. I am trying to rely on Webpack to help me there.

我需要一些基于我目前所掌握的指导。

Answer 1

我只是通过从我的 LoginForm.js 文件中删除这一行来解决它:

import '../../../styles/app.scss'

并将其放入我的 ./src/index.js 文件中，如下所示:

import '../styles/app.scss'

那些 ../ 是一种等待发生的代码味道。

我还更新了我的 webpack 配置文件，将 .scss 部分替换为您在此处看到的内容:

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: ['./src/index.js'],
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devtool: 'inline-source-map',
  module: {
    loaders: [
      {
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: { presets: ['react', 'es2015', 'stage-1'] }
      },
      {
        test: /\.(png|jpg)$/,
        loader: 'url-loader?limit=8192'
      },
      {
          test: /\.scss$/,
          loader: 'style-loader!css-loader!sass-loader?modules&localIdentName=[name]---[local]---[hash:base64:5]'
      },
    ]
  },
  plugins: [
      new ExtractTextPlugin({
          filename: 'css/[name]-[chunkhash].css',
          disable: false,
          allChunks: true
      }),
  ],
  resolve: {
    extensions: ['.js', '.jsx']
  },
  devServer: {
    hot: false,
    historyApiFallback: true,
    contentBase: './',
    port: 80
  }
};

我在这个网页上发现:http://jpsierens.com/tutorial-react-redux-webpack/之后，Webpack 抛出了一个关于不推荐使用的加载器语法的错误，这让我想起了解决这个问题的方法是显式声明它们。

如果有人遇到这种情况，请更改:

{
  test: /\.scss$/,
  loader: 'style!css!sass?modules&localIdentName=[name]---[local]---[hash:base64:5]'
},

为此:

{
  test: /\.scss$/,
  loader: 'style-loader!css-loader!sass-loader?modules&localIdentName=[name]---[local]---[hash:base64:5]'
},

我目前不知道这个hash部分是什么，但我想它与缓存失效有一定关系，所以我会保留它并在以后研究。

如果您发现任何相关内容，请发表评论。