Laravel mix can not share variables between scss and js files - laravel

Question

I'm using laravel mix to build and complie my front-end files, and trying to share variables between scss file and js, here is my scss file and app.js file.
variables.scss
$color: '#ffffff';
:export{
color: $color
}
app.js
import variables from './variables.scss'
console.log(variables)
It should print an object {color: '#ffffff'} defined in variables.scss file. But instead It prints out an empty object.
It's a brand new project,
I use laravel new my-project to download laravel.
npm install, npm install sass sass-loader --save-dev to install packages,that's it.
Here is my package.json file:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"sass": "^1.43.2",
"sass-loader": "^12.2.0"
}
}
so,what's the problem?

Answer 1

Do you have this in your webpack.config.js?
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
}
}