Question

我之前使用

导入它

import sass from '../scss/application.scss';

这是错误的导入类型吗？

现在它给我以下错误......

./app/components/Landing.js中的错误找不到模块：错误：不能解决'/ Users / sam / Desktop / talkwith / talkingwith'中的'style' BREAKING CHANGE：不再允许省略'-loader'后缀使用装载机时。您需要指定'style-loader'而不是'style'。 @ ./app/components/Landing.js 13：19-54 @ ./app/App.js @ multi（webpack）-dev-server / client？http://localhost:3333 ./app/App.js

现在不知道如何在我的组件中使用SASS。

编辑：我的webpack文件

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');


var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: [
    './app/App.js'
  ],
  output: {
    path: __dirname + '/public',
    filename: "bundle.js"
  },
  plugins: [HTMLWebpackPluginConfig],
  devServer: {
       inline:true,
       contentBase: './public',
       port: 3333
     },
  module: {
    loaders: [{ 
         test: /\.js$/, 
         exclude: /node_modules/, 
         loader: "babel-loader"
      },
        {
              test: /\.scss$/,
              loader: 'style!css!sass'
            }]
  }
};

Answer 1

我不是100％确定您正在使用的sass库。对我来说真正有用的是使用node-sass库和sass-loader。 https://github.com/jtangelder/sass-loader 最好将sass-loader与css-loader和style-loader一起使用。（如下面的例子所示）

使用sass-loader你的webpack.config.js看起来像这样。

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');


var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: [
   './app/App.js'
  ],
  output: {
   path: __dirname + '/public',
   filename: "bundle.js"
  },
  plugins: [HTMLWebpackPluginConfig],
  devServer: {
    inline:true,
    contentBase: './public',
    port: 3333
  },
  module: {
    loaders: [
     { 
      test: /\.js$/, 
      exclude: /node_modules/, 
      loader: "babel-loader"
     },
     { 
      test: /\.scss$/, 
      loaders: ["style-loader", "css-loader", "sass-loader"] 
     }
   ]
  }
};

将webpack.config.js更新到上面之后，您需要做的就是在您的入口点js文件中需要.scss文件，在您的情况下需要App.js

require('path/to/your/style.scss');

Answer 2

以为我会发布我最终使用的解决方案

  {
     test: /\.scss$/,
     loader: 'style-loader!css-loader!sass-loader'
  }

Answer 3

尝试

@import '../scss/application';

并在webpack配置中

{
    test: /\.scss$/,
    loaders: [
        'style',
        'css',
        'sass'
    ]
}

如何在我的React / webpack项目中使用sass？

3 个答案: