Question

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

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

我的主要问题是CSS无效。
此项目目前正在编译，没有问题。

以下是我当前的文件：

./ 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

我的root 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 /组件/ 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 /组件/ 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"，我正在导入其中包含CSS的'../../../styles/app.scss'：

.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已经连接起来了。

我的webpack.config.js文件搞砸了吗？

我尝试在LoginForm.js中导入SCSS的方式不正确吗？

我的index.html文件是否需要做任何工作？

我没有编译任何SCSS。我试图依靠Webpack来帮助我。

我需要根据目前的情况提供一些指示。

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部分是什么，但我认为它对缓存失效有一些影响，所以我会保留它并稍后进行研究。

如果您有任何疑问，请发表评论。

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

1 个答案: